@datarailsshared/dr_renderer 1.2.6 → 1.2.7

package/src/dr_pivottable.js

@@ -12,6 +12,10 @@ let initDRPivotTable = function($, window, document) {
       document.ReportHippo.user.organization.settings && document.ReportHippo.user.organization.settings.use_new_ux;
     // const numberOfRows = 500; // change to activate the handsontable when num of rows bigger then this.
 
+    const isFlatKeyInPivotKeys = function(keys, flatKey) {
+        return keys.some(key => key.join(delim) === flatKey);
+    };
+
     DRPivotData = (function(superClass) {
         extend(DRPivotData, superClass);
 
@@ -91,6 +95,7 @@ let initDRPivotTable = function($, window, document) {
 
         DRPivotData.prototype.arrSort = function(attrs) {
             var a, sortersArr;
+            const sortByValueAttrs = this.sortByValueAttrs;
             sortersArr = (function() {
                 var l, len1, results;
                 results = [];
@@ -100,11 +105,21 @@ let initDRPivotTable = function($, window, document) {
                 }
                 return results;
             }).call(this);
+
             return function(a, b) {
                 var comparison, i, sorter;
                 for (i in sortersArr) {
-                    sorter = sortersArr[i];
-                    comparison = sorter(a[i], b[i]);
+                    const index = parseInt(i);
+                    sorter = sortersArr[index];
+                    if (sortByValueAttrs.indexOf(attrs[index]) !== -1) {
+
+                        // For case current Field attrs[index] is sorted by value we are concatenating values passed to sorter function
+                        // Concatenation is done from first field in a block (first axis or first series) until current field index.
+                        // Cause for this case sorting will be as list of these concatenated strings (which is prepared in getSortingByValueOrderList)
+                        comparison = sorter(a.slice(0, index + 1).join(','), b.slice(0, index + 1).join(','));
+                    } else {
+                        comparison = sorter(a[index], b[index]);
+                    }
                     if (comparison !== 0) {
                         return comparison;
                     }
@@ -143,120 +158,72 @@ let initDRPivotTable = function($, window, document) {
             return key;
         };
 
-        DRPivotData.prototype.processRecord = function(record, useTotalsCalculation) {
-            if (useTotalsCalculation) {
-                if (!this.notFirst) {
-                    this.keysLength = _.filter(_.keys(record), key => !_.includes(['data_types', 'formats', 'values_formats'], key)).length - 1;
-                    this.notFirst = true;
-                }
-                let getRowAggregator = (function(_this) {
-                    return function(key) {
-                        return _this.aggregator(_this, key, []);
-                    };
-                })(this);
-                let getColAggregator = (function(_this) {
-                    return function(key) {
-                        return _this.aggregator(_this, [], key);
-                    };
-                })(this);
-
-                let rowKey = [];
-                for (k = 0; k < this.rowAttrs.length; k++) {
-                    let attr = this.rowAttrs[k];
-                    if (record.hasOwnProperty(attr)) {
-                        rowKey.push((ref = record[attr]) != null ? ref : "null");
-                    }
-                }
-
-                let colKey = [];
-                for (k = 0; k < this.colAttrs.length; k++) {
-                    let attr = this.colAttrs[k];
-                    if (record.hasOwnProperty(attr)) {
-                        colKey.push((ref = record[attr]) != null ? ref : "null");
-                    }
-                }
-
-                let flatRowKey = rowKey.join(delim);
-                let flatColKey = colKey.join(delim);
-
-                if (this.keysLength === rowKey.length + colKey.length) {
-                    if (!this.rowKeys.some(rKey => rKey.join(delim) === flatRowKey)) {
-                        this.rowKeys.push(rowKey);
-                    }
-                    if (!this.colKeys.some(cKey => cKey.join(delim) === flatColKey)) {
-                        this.colKeys.push(colKey);
-                    }
-                }
-
-                if (!colKey.length && !rowKey.length) {
-                    this.allTotal.push(record);
-                } else if (!colKey.length && rowKey.length) {
-                    if (!this.rowTotals[flatRowKey]) {
-                        this.rowTotals[flatRowKey] = getRowAggregator(rowKey.slice());
-                        this.rowTotals[flatRowKey].push(record);
-                    }
-                } else if (!rowKey.length && colKey.length) {
-                    if (!this.colTotals[flatColKey]) {
-                        this.colTotals[flatColKey] = getColAggregator(colKey.slice());
-                        this.colTotals[flatColKey].push(record);
-                    }
-                } else {
-                    if (!this.tree[flatRowKey]) {
-                        this.tree[flatRowKey] = {};
-                    }
-                    this.tree[flatRowKey][flatColKey] = this.aggregator(this, rowKey, colKey);
-                    this.tree[flatRowKey][flatColKey].push(record);
+        DRPivotData.prototype.getAttrsKeys = function(record, attrs) {
+            const keys = [];
+            for (let k = 0; k < attrs.length; k++) {
+                const attr = attrs[k];
+                if (record.hasOwnProperty(attr)) {
+                    keys.push(record[attr] != null ? record[attr] : 'null');
                 }
-                return;
             }
+            return keys;
+        }
 
-            var colKey, fColKey, fRowKey, flatColKey, flatRowKey, i, j, k, m, n, ref, results, rowKey;
-            rowKey = [];
-            colKey = [];
-            const recordValues = _.values(record);
-            const containsAverage = _.includes(recordValues, 'DR_Average');
-            const containsOthers = _.includes(recordValues, 'DR_Others');
-            if (!containsAverage && !containsOthers) {
-                this.allTotal.push(record);
+        DRPivotData.prototype.getFlatKey = function(record, attrs) {
+            const keys = this.getAttrsKeys(record, attrs);
+            return keys.join(delim);
+        }
+
+        DRPivotData.prototype.processRecord = function(record) {
+            if (!this.notFirst) {
+                this.keysLength = _.filter(_.keys(record), key => !_.includes(['data_types', 'formats', 'values_formats'], key)).length - 1;
+                this.notFirst = true;
             }
-            rowKey = processKey(record, this.rowTotals, this.rowKeys, this.rowAttrs, containsAverage, containsOthers,  (function(_this) {
+            let getRowAggregator = (function(_this) {
                 return function(key) {
                     return _this.aggregator(_this, key, []);
                 };
-            })(this));
-            colKey = processKey(record, this.colTotals, this.colKeys, this.colAttrs, containsAverage, containsOthers, (function(_this) {
+            })(this);
+            let getColAggregator = (function(_this) {
                 return function(key) {
                     return _this.aggregator(_this, [], key);
                 };
-            })(this));
+            })(this);
 
-            m = rowKey.length - 1;
-            n = colKey.length - 1;
-            if (m < 0 || n < 0) {
-                return;
+            const rowKey = this.getAttrsKeys(record, this.rowAttrs);
+            const colKey = this.getAttrsKeys(record, this.colAttrs);
+
+            let flatRowKey = rowKey.join(delim);
+            let flatColKey = colKey.join(delim);
+
+            if (this.keysLength === rowKey.length + colKey.length) {
+                if (!this.isKeysSortingDoneOnBackendSide && !isFlatKeyInPivotKeys(this.rowKeys, flatRowKey)) {
+                    this.rowKeys.push(rowKey);
+                }
+                if (!this.isKeysSortingDoneOnBackendSide && !isFlatKeyInPivotKeys(this.colKeys, flatColKey)) {
+                    this.colKeys.push(colKey);
+                }
             }
-            results = [];
-            for (i = k = 0, ref = m; 0 <= ref ? k <= ref : k >= ref; i = 0 <= ref ? ++k : --k) {
-                fRowKey = rowKey.slice(0, i + 1);
-                flatRowKey = fRowKey.join(delim);
+
+            if (!colKey.length && !rowKey.length) {
+                this.allTotal.push(record);
+            } else if (!colKey.length && rowKey.length) {
+                if (!this.rowTotals[flatRowKey]) {
+                    this.rowTotals[flatRowKey] = getRowAggregator(rowKey.slice());
+                    this.rowTotals[flatRowKey].push(record);
+                }
+            } else if (!rowKey.length && colKey.length) {
+                if (!this.colTotals[flatColKey]) {
+                    this.colTotals[flatColKey] = getColAggregator(colKey.slice());
+                    this.colTotals[flatColKey].push(record);
+                }
+            } else {
                 if (!this.tree[flatRowKey]) {
                     this.tree[flatRowKey] = {};
                 }
-                results.push((function() {
-                    var l, ref1, results1;
-                    results1 = [];
-                    for (j = l = 0, ref1 = n; 0 <= ref1 ? l <= ref1 : l >= ref1; j = 0 <= ref1 ? ++l : --l) {
-                        fColKey = colKey.slice(0, j + 1);
-                        flatColKey = fColKey.join(delim);
-                        if (!this.tree[flatRowKey][flatColKey]) {
-                            this.tree[flatRowKey][flatColKey] = this.aggregator(this, fRowKey, fColKey);
-                        }
-                        results1.push(this.tree[flatRowKey][flatColKey].push(record));
-                    }
-                    return results1;
-                }).call(this));
+                this.tree[flatRowKey][flatColKey] = this.aggregator(this, rowKey, colKey);
+                this.tree[flatRowKey][flatColKey].push(record);
             }
-            return results;
         };
 
         DRPivotData.prototype.getAggregator = function(rowKey, colKey) {
@@ -429,13 +396,10 @@ let initDRPivotTable = function($, window, document) {
             switch (opts.chartOptions.negative_numbers.value) {
                 case 'red_minus':
                     return '<span style="color: red; fill: red;">' + aggregator.format(val, format_argument) + '</span>';
-                    break;
                 case 'absolute':
                     return '(' + aggregator.format(Math.abs(val), format_argument) + ')';
-                    break;
                 case 'red_absolute':
                     return '<span style="color: red; fill: red;">(' + aggregator.format(Math.abs(val), format_argument) + ')</span>';
-                    break;
                 default:
                     return aggregator.format(val, format_argument);
             }
@@ -471,8 +435,11 @@ let initDRPivotTable = function($, window, document) {
             return resultsArr;
         } else {
             let tooMuch = false;
-            if (pvtData && (pvtData.rowKeys.length > 1000 || pvtData.colKeys.length > 500) &&
-                (!opts.show_more_function_cols || !opts.show_more_function_cols)) {
+            const show_more_than_thousand_rows = _.get(opts, 'chartOptions.table_options.show_more_than_thousand_rows', false);
+            if (pvtData &&
+                (pvtData.rowKeys.length > 1000 || pvtData.colKeys.length > 500) &&
+                (!opts.show_more_function_cols || !opts.show_more_function_cols) &&
+                !show_more_than_thousand_rows) {
                 pvtData.rowKeys = [];
                 pvtData.colKeys = [];
                 tooMuch = true;
@@ -484,11 +451,11 @@ let initDRPivotTable = function($, window, document) {
     }
 
     SubtotalRenderer = function(pivotData, opts, charttype, tooMuch = false, error_params) {
-        var addClass, allTotal, arrowCollapsed, arrowExpanded, buildColHeaderHeader, buildColHeaderHeaders, buildColHeaderHeadersClickEvents, buildColHeaders, buildColTotals, buildColTotalsHeader, buildGrandTotal, buildRowHeaderHeaders, buildRowHeaderHeadersClickEvents, buildRowHeaders, buildRowTotalsHeader, buildValues, classColCollapsed, classColExpanded, classColHide, classColShow, classCollapsed, classExpanded, classRowCollapsed, classRowExpanded, classRowHide, classRowShow, clickStatusCollapsed, clickStatusExpanded, colAttrs, colDisableAfter, colKeys, colTotals, collapseCol, collapseColsAt, collapseHideDescendantRow, collapseRow, collapseRowsAt, collapseShowColSubtotal, collapseShowRowSubtotal, applyInlineStyles, createElement, defaults, expandChildCol, expandChildRow, expandCol, expandColsAt, expandHideColSubtotal, expandHideRowSubtotal, expandRow, expandRowsAt, expandShowColSubtotal, expandShowRowSubtotal, getTableEventHandlers, hasClass, hideDescendantCol, isColDisable, isColDisableExpandCollapse, isColHideOnExpand, isRowDisable, isRowDisableExpandCollapse, isRowHideOnExpand, main, getSubtotalInBrackets, processKeys, encodeHtmlEntities, ref, ref1, ref2, ref3, ref4, ref5, ref6, ref7, removeClass, replaceClass, rowAttrs, rowDisableAfter, rowKeys, rowTotals, setAttributes, showChildCol, showChildRow, toggleCol, toggleColHeaderHeader, toggleRow, toggleRowHeaderHeader, tree, assumptionSubscribe;
+        var addClass, allTotal, arrowCollapsed, arrowExpanded, buildColHeaderHeader, buildColHeaderHeaders, buildColHeaderHeadersClickEvents, buildColHeaders, buildColTotals, buildColTotalsHeader, buildGrandTotal, buildRowHeaderHeaders, buildRowHeaderHeadersClickEvents, buildRowHeaders, buildRowTotalsHeader, buildValues, classColCollapsed, classColExpanded, classColHide, classColShow, classCollapsed, classExpanded, classRowCollapsed, classRowExpanded, classRowHide, classRowShow, clickStatusCollapsed, clickStatusExpanded, colAttrs, colDisableAfter, colKeys, colTotals, collapseCol, collapseColsAt, collapseHideDescendantRow, collapseRow, collapseRowsAt, collapseShowColSubtotal, collapseShowRowSubtotal, applyInlineStyles, createElement, defaults, expandChildCol, expandChildRow, expandCol, expandColsAt, expandHideColSubtotal, expandHideRowSubtotal, expandRow, expandRowsAt, expandShowColSubtotal, expandShowRowSubtotal, getTableEventHandlers, hasClass, hideDescendantCol, isColDisable, isColDisableExpandCollapse, isColHideOnExpand, isRowDisable, isRowDisableExpandCollapse, isRowHideOnExpand, main, getSubtotalInBrackets, processKeys, encodeHtmlEntities, ref, ref1, ref2, ref3, ref4, ref5, ref6, ref7, removeClass, replaceClass, rowAttrs, rowDisableAfter, rowKeys, rowTotals, setAttributes, showChildCol, showChildRow, toggleCol, toggleColHeaderHeader, toggleRow, toggleRowHeaderHeader, tree, subscribeToClick;
         var createTotalValsBolder, createGrandTotalBolder, getHeaderColorProperties, colorizeRowLabelHeaders, colorizeTableIfNeed, valueNoDashes, getColorsWithOffsetForTable, offsetColors, handleFreezePanesScroll, selectFreezableElements, removeRowHeaderNullValue;
         var getAdditionalAggregation, buildAdditionalHeaderCols, buildAdditionalHeaderRows, buildAdditionalColValues, buildAdditionalRowValues, buildAdditionalRowTotals, buildAdditionalColTotals;
         var additionalFieldsCol, additionalFieldsRow, additionalFieldsList;
-        var edit_assumptions, getExistingAggregator;
+        var getExistingAggregator;
 
         var horizontalFreezePaneClass = opts.chartOptions.table_options.freeze_panes ? ' horizontal-freeze-pane' : '';
         var verticalFreezePaneClass = opts.chartOptions.table_options.freeze_panes ? ' vertical-freeze-pane' : '';
@@ -539,7 +506,6 @@ let initDRPivotTable = function($, window, document) {
         if(opts.chartOptions.table_options.start_collapsed_columns) {
             opts.collapseColsAt = 0;
         }
-        edit_assumptions = opts.chartOptions.edit_assumptions;
         isRowDisable = (ref = opts.rowSubtotalDisplay) != null ? ref.disableSubtotal : void 0;
         isRowHideOnExpand = (ref1 = opts.rowSubtotalDisplay) != null ? ref1.hideOnExpand : !opts.chartOptions.table_options.show_subtotals_for_rows;
         isRowDisableExpandCollapse = (ref2 = opts.rowSubtotalDisplay) != null ? ref2.disableExpandCollapse : void 0;
@@ -876,7 +842,7 @@ let initDRPivotTable = function($, window, document) {
             return string_val;
         };
 
-        processKeys = function(keysArr, className, dimention, attrs) {
+        processKeys = function(keysArr, className, dimention, attrs, formattedKeys) {
             for (let i = 0; i < keysArr.length; i++) {
                 const additionalField = _.find(additionalFieldsList, {key: keysArr[i][0]})
 
@@ -897,7 +863,7 @@ let initDRPivotTable = function($, window, document) {
                 lastCol = 0;
             }
             rMark = [];
-            th = createElement("th", className, valueNoDashes(encodeHtmlEntities(keysArr[0][0]) + getSubtotalInBrackets(keysArr, className, lastCol, lastRow, 0, 0)));
+            th = createElement("th", className, valueNoDashes(encodeHtmlEntities(formattedKeys[0][0]) + getSubtotalInBrackets(keysArr, className, lastCol, lastRow, 0, 0)));
             key = [];
             key.push(keysArr[0][0]);
             nodePos = 0;
@@ -917,7 +883,7 @@ let initDRPivotTable = function($, window, document) {
             rMark[0] = node;
             c = 1;
             while (c <= lastCol) {
-                th = createElement("th", className, valueNoDashes(encodeHtmlEntities(keysArr[0][c]) + getSubtotalInBrackets(keysArr, className, lastCol, lastRow, 0, c)));
+                th = createElement("th", className, valueNoDashes(encodeHtmlEntities(formattedKeys[0][c]) + getSubtotalInBrackets(keysArr, className, lastCol, lastRow, 0, c)));
                 key = key.slice();
                 key.push(keysArr[0][c]);
                 ++nodePos;
@@ -983,7 +949,7 @@ let initDRPivotTable = function($, window, document) {
                     }
 
 
-                    th = createElement("th", className, valueNoDashes(encodeHtmlEntities(keysArr[r][c]) + getSubtotalInBrackets(keysArr, className, lastCol, lastRow, r, c)));
+                    th = createElement("th", className, valueNoDashes(encodeHtmlEntities(formattedKeys[r][c]) + getSubtotalInBrackets(keysArr, className, lastCol, lastRow, r, c)));
                     ++nodePos;
                     node = {
                         node: nodePos,
@@ -1570,7 +1536,7 @@ let initDRPivotTable = function($, window, document) {
                     if ((isRowSubtotal && (isRowHideOnExpand || isRowDisable || rowHeader.col > rowDisableAfter)) || (isColSubtotal && (isColHideOnExpand || isColDisable || colHeader.col > colDisableAfter))) {
                         td.style.display = "none";
                     }
-                    assumptionSubscribe(td, rowHeader, rowAttrs, colHeader, colAttrs, val);
+                    subscribeToClick(td, rowHeader, rowAttrs, colHeader, colAttrs, val);
 
                     tr.appendChild(td);
                 }
@@ -1608,7 +1574,7 @@ let initDRPivotTable = function($, window, document) {
                     td.style.display = "none";
                 }
 
-                assumptionSubscribe(td, rowHeader, rowAttrs, {key:[], flatKey:''}, colAttrs, val);
+                subscribeToClick(td, rowHeader, rowAttrs, {key:[], flatKey:''}, colAttrs, val);
 
                 if(opts.chartOptions.table_options.show_row_total)
                     tr.appendChild(td);
@@ -1618,43 +1584,7 @@ let initDRPivotTable = function($, window, document) {
             return results;
         };
 
-        assumptionSubscribe = function(td, rowHeader, rowAttrs, colHeader, colAttrs, val){
-            if(edit_assumptions){
-                var filters = [];
-                var i=0;
-                var temp;
-                for(i=0; i<rowHeader.key.length; i++){
-                    temp = {
-                        name: rowAttrs[i],
-                        values: [rowHeader.key[i]],
-                        is_excluded:false
-                    }
-                    filters.push(temp);
-                }
-                for(i=0; i<colHeader.key.length; i++){
-                    temp = {
-                        name: colAttrs[i],
-                        values: [colHeader.key[i]],
-                        is_excluded:false
-                    }
-                    filters.push(temp);
-                }
-                var obj_to_send = {
-                    "flatColKey": colHeader.flatKey,
-                    "flatRowKey": rowHeader.flatKey,
-                    "val": val,
-                    "filters": filters
-                };
-
-                // td.addEventListener('dblclick', function(){
-                //     edit_assumptions.fn(obj_to_send, this);
-                // });
-
-                td.addEventListener('click', function(){
-                    edit_assumptions.fn(obj_to_send, this);
-                });
-            }
-
+        subscribeToClick = function(td, rowHeader, rowAttrs, colHeader, colAttrs, val){
             if(opts.value_drill_down_fn){
                 td.classList.add('clickable');
                 td.addEventListener('click', function(rowKey, colKey, rowAttrs, colAttrs){
@@ -1715,7 +1645,7 @@ let initDRPivotTable = function($, window, document) {
                     td.style.display = "none";
                 }
 
-                assumptionSubscribe(td, {key:[], flatKey:''}, rowAttrs, h, colAttrs, val);
+                subscribeToClick(td, {key:[], flatKey:''}, rowAttrs, h, colAttrs, val);
 
                 results.push(tr.appendChild(td));
             }
@@ -1741,7 +1671,7 @@ let initDRPivotTable = function($, window, document) {
                 "data-value": val
             }, getTableEventHandlers(val, [], []));
             createTotalValsBolder(td);
-            assumptionSubscribe(td, {key:[], flatKey:''}, rowAttrs,  {key:[], flatKey:''}, colAttrs, val);
+            subscribeToClick(td, {key:[], flatKey:''}, rowAttrs,  {key:[], flatKey:''}, colAttrs, val);
 
             tr.appendChild(td);
             return result.appendChild(tr);
@@ -2407,7 +2337,7 @@ let initDRPivotTable = function($, window, document) {
             return Array.from(wrapper.querySelectorAll(selectString));
         }
 
-        main = function(rowAttrs, rowKeys, colAttrs, colKeys) {
+        main = function(rowAttrs, rowKeys, colAttrs, colKeys, pivotData) {
             var c,rowspan, colHeaderCols, colHeaderHeaders, colHeaders, h, k, l, len, len1, result, rowHeaderHeaders, rowHeaderRows, rowHeaders, tbody, thead, tr;
             rowHeaders = [];
             colHeaders = [];
@@ -2416,10 +2346,12 @@ let initDRPivotTable = function($, window, document) {
             colHeaderHeaders = [];
             colHeaderCols = [];
             if (rowAttrs.length > 0 && rowKeys.length > 0) {
-                rowHeaders = processKeys(rowKeys, "pvtRowLabel", 'rows', rowAttrs);
+                const formattedKeys = pivotData.getFormattedRowKeys(rowKeys);
+                rowHeaders = processKeys(rowKeys, "pvtRowLabel", 'rows', rowAttrs, formattedKeys);
             }
             if (colAttrs.length > 0 && colKeys.length > 0) {
-                colHeaders = processKeys(colKeys, "pvtColLabel", 'cols', colAttrs);
+                const formattedKeys = pivotData.getFormattedColKeys(colKeys);
+                colHeaders = processKeys(colKeys, "pvtColLabel", 'cols', colAttrs, formattedKeys);
             }
             var tableClasses = ['pvtTable'];
             if (opts.chartOptions.table_options.use_new_table_design) {
@@ -2564,7 +2496,7 @@ let initDRPivotTable = function($, window, document) {
 
             return wrapper;
         };
-        return main(rowAttrs, rowKeys, colAttrs, colKeys);
+        return main(rowAttrs, rowKeys, colAttrs, colKeys, pivotData);
     };
     // $.pivotUtilities.subtotal_renderers = SubtotalRenderer;
     $.pivotUtilities.subtotal_renderers = NovixRenderer;

package/src/graph-table-renderer.js

@@ -0,0 +1,147 @@
+/**
+ * @typedef {Object} HighChartsRenderer
+ * @property {(rows: Rows, options: GTROptions | null, isTable: boolean, widget: any, pivotModel?: PivotModel) => string} rhPivotViewV2
+ */
+
+/**
+ * @typedef {Object} PivotUtilities
+ * @property {(rows: Rows, options: GTROptions) => PivotModel} getPivotDataModel
+ */
+
+/**
+ * @typedef {Object} JQuery
+ * @property {PivotUtilities} pivotUtilities
+ */
+
+/**
+ * @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
+ */
+
+export class GraphTableRenderer {
+    /**
+     * @type {PivotModel | undefined}
+     */
+    #pivotModel;
+
+    /**
+     * @type {GTROptions | null}
+     */
+    #options = null;
+
+    /**
+     * @type {Record<string, Record<string, number | string> | number | string>[]}
+     * 
+     */
+    #rows = [];
+
+    /**
+     * Utility properties
+     */
+    /**
+     * @type {HighChartsRenderer}
+     */
+    #hcr;
+    /**
+     * @type {JQuery}
+     */
+    #$;
+    /**
+     * @type {PivotUtilities}
+     */
+    #pivotUtilities;
+
+    /**
+     * @type {any | null}
+     */
+    #hcInstance = null;
+
+    /**
+     * 
+     * @param {HighChartsRenderer} hcr 
+     * @param {JQuery} $
+     */
+    constructor(hcr, $) {
+        this.#hcr = hcr;
+        this.#$ = $;
+        this.#pivotUtilities = this.#$.pivotUtilities;
+    }
+
+    /**
+     * Creates Pivot Data Model that works we BE data response to aggregate data to render with Chart and Table
+     * @param {Rows} rows BE data response
+     * @param {GTROptions} options 
+     * @returns {this}
+     */
+    createPivotModel(rows, options) {
+        this.#options = options;
+        this.#rows = rows;
+        this.#pivotModel = this.#pivotUtilities.getPivotDataModel(rows, options);
+        return this;
+    }
+
+    /**
+     * @returns {void}
+     */
+    disposePivotModel() {
+        this.#pivotModel = undefined;
+    }
+
+    /**
+     * @see createPivotModel
+     * @returns {PivotModel | undefined}
+     */
+    getPivotModel() {
+        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);
+    }
+
+    renderChart(widget = null) {
+        const chart = this.#hcr.rhPivotViewV2(this.#rows, this.#options, false, widget, this.#pivotModel);
+        setTimeout(() => {
+            this.#setHcInstance();
+        });
+        return chart;
+    }
+}
+
+export default GraphTableRenderer;