@datarailsshared/dr_renderer 1.2.391 → 1.2.392

package/README.md

@@ -13,6 +13,11 @@ This project was generated by amazing Datarails R&D team
     let default_colors = ["#106bd0", "#00cee8", "#95c8d8", "#89cff0", "#FE746D", "#6ADC4C", "#9B9AD9", "#ff8000", "#C11B12", "#5a41f9"];
     let hr = dr_renderer.getInitHighchartsRenderer($, document, default_colors, Highcharts);
 
+## Development
+### Types
+To be able to compile types with `npm run build:types` you need to install typescript globally:
+
+```npm i -g typescript```
 
 ## Publish to npm
 Just merge to prod branch

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datarailsshared/dr_renderer",
-  "version": "1.2.391",
+  "version": "1.2.392",
   "description": "DataRails charts and tables renderer",
   "keywords": [
     "datarails",
@@ -10,7 +10,8 @@
   ],
   "scripts": {
     "login": "npm login",
-    "test": "jest --coverage"
+    "test": "jest --coverage",
+    "build:types": "tsc --build --verbose"
   },
   "author": "Sergey Spivakov",
   "repository": {

package/src/dr_pivottable.js

@@ -159,8 +159,67 @@ let initDRPivotTable = function($, window, document) {
         };
 
         DRPivotData.prototype.getInsight = function(colKey, rowKey) {
-            const insightInfo = _.find(this.insights, insight => insight.colKey === colKey && insight.rowKey === rowKey);
-            return _.get(insightInfo, 'insight', null);
+            const key = [rowKey, colKey].join(delim);
+            return this.insights.get(key);
+        }
+
+        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 keys;
+        }
+
+        DRPivotData.prototype.getFlatKey = function(record, attrs) {
+            const keys = this.getAttrsKeys(record, attrs);
+            return keys.join(delim);
+        }
+
+        DRPivotData.prototype.buildInsights = function(rows, useServerTotalsCalculation) {
+            for (let index = 0; index < rows.length; index++) {
+                const record = rows[index];
+                const insight = record.insight;
+                delete record.insight;
+
+                if (!insight) continue;
+
+                if (useServerTotalsCalculation) {
+                    const flatRowKey = this.getFlatKey(record, this.rowAttrs);
+                    const flatColKey = this.getFlatKey(record, this.colAttrs);
+
+                    if (flatRowKey || flatColKey) {
+                        this.insights.set([flatRowKey, flatColKey].join(delim), insight);
+                    }
+                    continue;
+                }
+
+                const recordValues = _.values(record);
+                const containsAverage = _.includes(recordValues, 'DR_Average');
+                const containsOthers = _.includes(recordValues, 'DR_Others');
+
+                const rowKey = processKey(record, this.rowTotals, this.rowKeys, this.rowAttrs, containsAverage, containsOthers,  (function(_this) {
+                    return function(key) {
+                        return _this.aggregator(_this, key, []);
+                    };
+                })(this));
+
+                const colKey = processKey(record, this.colTotals, this.colKeys, this.colAttrs, containsAverage, containsOthers, (function(_this) {
+                    return function(key) {
+                        return _this.aggregator(_this, [], key);
+                    };
+                })(this));
+
+                const flatRowKey = rowKey.join(delim);
+                const flatColKey = colKey.join(delim);
+
+                if (flatRowKey || flatColKey) {
+                    this.insights.set([flatRowKey, flatColKey].join(delim), insight);
+                }
+            }
         }
 
         DRPivotData.prototype.processRecord = function(record, useTotalsCalculation) {
@@ -183,21 +242,8 @@ let initDRPivotTable = function($, window, document) {
                     };
                 })(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");
-                    }
-                }
+                const rowKey = this.getAttrsKeys(record, this.rowAttrs);
+                const colKey = this.getAttrsKeys(record, this.colAttrs);
 
                 let flatRowKey = rowKey.join(delim);
                 let flatColKey = colKey.join(delim);
@@ -232,11 +278,7 @@ let initDRPivotTable = function($, window, document) {
                 }
 
                 if (insight && (flatRowKey || flatColKey)) {
-                    this.insights.push({
-                        colKey: flatColKey,
-                        rowKey: flatRowKey,
-                        insight: insight,
-                    });
+                    this.insights.set([flatRowKey, flatColKey].join(delim), insight);
                 }
                 return;
             }
@@ -266,11 +308,7 @@ let initDRPivotTable = function($, window, document) {
                 const flatColKeyForInsight = colKey.join(delim);
 
                 if (flatRowKeyForInsight || flatColKeyForInsight) {
-                    this.insights.push({
-                        colKey: flatColKeyForInsight,
-                        rowKey: flatRowKeyForInsight,
-                        insight: insight,
-                    });
+                    this.insights.set([flatRowKeyForInsight, flatColKeyForInsight].join(delim), insight);
                 }
             }
 

package/src/graph-table-renderer.js

@@ -0,0 +1,110 @@
+/**
+ * @typedef {Object} HighChartsRenderer
+ * @property {(rows: Rows, options: GTROptions, 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
+ * @property {(rows: Rows, useTotalsCalculation: boolean) => void} buildInsights
+ */
+
+/**
+ * @typedef {Object} GTROptions
+ */
+
+/**
+ * @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;
+
+    /**
+     * 
+     * @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;
+    }
+
+    renderTable(widget = null) {
+        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);
+    }
+}
+
+export default GraphTableRenderer;

package/src/highcharts_renderer.js

@@ -4695,6 +4695,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         }
     };
 
+    /**
+     * Support rhPivotViewV2 version
+     */
     highchartsRenderer.rhPivotView = function (rowData, options, isTable = false, widget = null) {
         if (!rowData || !rowData) {
             if (options.onlyOptions) {
@@ -4858,6 +4861,168 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         return result;
     };
 
+    highchartsRenderer.rhPivotViewV2 = function (rowData, options, isTable = false, widget = null, pivotData) {
+        if (!rowData) {
+            if (options.onlyOptions) {
+                return {};
+            }
+            return null;
+        }
+
+        const isWalktrough = lodash.get(widget, 'chart_type') === highchartsRenderer.CHART_TYPES.WATERFALL_WALKTHROUGH;
+        const isBreakdown = lodash.get(widget, 'chart_type')=== highchartsRenderer.CHART_TYPES.WATERFALL_BREAKDOWN;
+        const isWaterfall = isWalktrough || isBreakdown;
+
+        if (isWaterfall) {
+            const maxCategories = highchartsRenderer.waterfallConstants[widget.chart_type].maxCategoriesCount;
+            const minCategories = highchartsRenderer.waterfallConstants[widget.chart_type].minCategoriesCount;
+            let uniqueCategories = [];
+
+            if (isBreakdown) {
+                uniqueCategories = lodash.filter(
+                    lodash.uniq(
+                        lodash.map(rowData, row => row[widget.cols[0].name])
+                    ),
+                    value => !!value
+                );
+            } else {
+                uniqueCategories = lodash.filter(
+                    lodash.get(widget, 'options.walkthrough_options.values.walkthrough'),
+                    (category) => category.trend !== 'total'
+                );
+            }
+            if (uniqueCategories && ((maxCategories && uniqueCategories.length > maxCategories)
+                || (minCategories && uniqueCategories.length < minCategories))) {
+                options.error_has_occurred = true;
+                const breakdownText = `Please adjust your dashboard's reference date or filter selections as \
+                the quantity of data doesn't match the limit of at least ${ minCategories } values.`;
+                const walkthroughText = `Please adjust your dashboard's reference date and filter selections as \
+                the quantity of data doesn't match the chart's ${ minCategories }-${ maxCategories } value limit.`;
+
+                options.error_params = {
+                    title: 'Data Conflict',
+                    text: isBreakdown ? breakdownText : walkthroughText,
+                    class: uniqueCategories.length < minCategories ? 'waterfall-nodata' : 'waterfall-too-much-data',
+                }
+
+                return highchartsRenderer.getNoDataResult(options.rendererOptions, true);
+            }
+        }
+
+        if (rowData.length == 0) {
+            if (options.onlyOptions) {
+                return {};
+            }
+
+            options.error_has_occurred = true;
+            options.error_params = highchartsRenderer.widgetPlaceholders.nodata;
+            return highchartsRenderer.getNoDataResult(options.rendererOptions);
+        }
+
+        if (rowData.length > highchartsRenderer.MAX_ROWS_FOR_SHOW_RESULTS) {
+            if (options.onlyOptions) {
+                return {};
+            }
+
+            options.error_has_occurred = true;
+            options.error_params = highchartsRenderer.widgetPlaceholders.tooMuchData;
+            return highchartsRenderer.getNoDataResult(options.rendererOptions, true);
+        }
+
+        var tmp = $.pivotUtilities.aggregatorTemplates;
+        var defaults, e, result, opts, optsFiltered;
+        defaults = {
+            cols: [],
+            rows: [],
+            vals: [],
+            filter: function () {
+                return true;
+            },
+            aggregator: tmp.count()(),
+            aggregatorName: "Count",
+            sorters: function () {
+            },
+            derivedAttributes: {},
+            renderer: $.pivotUtilities.subtotal_renderers,
+            rendererOptions: null,
+            localeStrings: $.pivotUtilities.locales.en.localeStrings,
+            onlyOptions: false
+        };
+
+        opts = $.extend(defaults, options);
+        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;
+        }
+
+        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) {
+                    if (!opts.rendererOptions) {
+                        opts.rendererOptions = {};
+                    }
+                    opts.rendererOptions.onlyOptions = true;
+                }
+
+                if (!highchartsRenderer.sortHasBeenDoneOnBE(lodash.get(widget, 'pivot.keysObject'))) {
+                    const sortByValueSettings = lodash.filter(
+                        lodash.get(widget, 'options.sortingFields', []),
+                        sortingField => lodash.includes(['field_values', 'variance'], lodash.get(sortingField, 'sorting.sort_by'))
+                    );
+    
+                    if (sortByValueSettings.length) {
+                        pivotData.sortByValueAttrs = lodash.map(sortByValueSettings, fieldSorting => fieldSorting.name);
+                        let new_sorting_function = highchartsRenderer.generateSortingFunctionByValues(sortByValueSettings, pivotData, opts, widget);
+                        opts.sorters = new_sorting_function;
+                        optsFiltered.sorters = new_sorting_function;
+                        pivotData.sorters = new_sorting_function;
+
+                        if (lodash.isObject(lodash.get(widget, 'pivot'))) {
+                            widget.pivot.sorters = new_sorting_function;
+                        }
+                    }
+                }
+
+                result = opts.renderer(pivotData, opts.rendererOptions);
+            } catch (_error) {
+                e = _error;
+                if (typeof console !== "undefined" && console !== null) {
+                    console.error(e.stack);
+                }
+                result = $("<span>").html(opts.localeStrings.renderError);
+                if (options.onlyOptions) {
+                    result = {};
+                }
+            }
+
+            if (lodash.isObject(lodash.get(widget, 'pivot'))) {
+                widget.pivot.sortByValueAttrs = pivotData.sortByValueAttrs;
+            }
+        } catch (_error) {
+            e = _error;
+            if (typeof console !== "undefined" && console !== null) {
+                console.error(e.stack);
+            }
+            result = $("<span>").html(opts.localeStrings.computeError);
+            if (options.onlyOptions) {
+                result = {};
+            }
+        }
+
+        return result;
+    };
+
     /******** Convertors *******/
 
     highchartsRenderer.getOnlyIncludedOfField = function (filedObj) {

package/src/pivottable.js

@@ -688,7 +688,7 @@ let initPivotTable = function($, window, document) {
                 return true;
             });
             this.tree = {};
-            this.insights = [];
+            this.insights = new Map();
 
             this.isKeysSortingDoneOnBackendSide = opts.keysObject && typeof opts.keysObject === 'object' && helpers.backendSortingKeysAreNotEmpty(opts.keysObject);
             if (this.isKeysSortingDoneOnBackendSide) {

package/tsconfig.json

@@ -0,0 +1,15 @@
+{
+    "compilerOptions": {
+        "declaration": true,
+        "allowJs": true,
+        "declarationDir": "./types",
+        "checkJs": true,
+        "moduleResolution": "Node16",
+        "module": "Node16",
+        "target": "esnext",
+        "emitDeclarationOnly": true,
+        "strict": true
+    },
+    "include": ["./src/graph-table-renderer.js"],
+    "exclude": ["node_modules"]
+}

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

@@ -0,0 +1,67 @@
+/**
+ * @typedef {Object} HighChartsRenderer
+ * @property {(rows: Rows, options: GTROptions, 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
+ * @property {(rows: Rows, useTotalsCalculation: boolean) => void} buildInsights
+ */
+/**
+ * @typedef {Object} GTROptions
+ */
+/**
+ * @typedef {Record<string, Record<string, number | string> | number | string>[]} Rows - BE data response
+ */
+export class GraphTableRenderer {
+    /**
+     *
+     * @param {HighChartsRenderer} hcr
+     * @param {JQuery} $
+     */
+    constructor(hcr: HighChartsRenderer, $: JQuery);
+    /**
+     * 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: Rows, options: GTROptions): this;
+    /**
+     * @returns {void}
+     */
+    disposePivotModel(): void;
+    /**
+     * @see createPivotModel
+     * @returns {PivotModel | undefined}
+     */
+    getPivotModel(): PivotModel | undefined;
+    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;
+};
+export type PivotUtilities = {
+    getPivotDataModel: (rows: Rows, options: GTROptions) => PivotModel;
+};
+export type JQuery = {
+    pivotUtilities: PivotUtilities;
+};
+export type PivotModel = {
+    buildInsights: (rows: Rows, useTotalsCalculation: boolean) => void;
+};
+export type GTROptions = Object;
+/**
+ * - BE data response
+ */
+export type Rows = Record<string, Record<string, number | string> | number | string>[];

package/types/index.d.ts

@@ -0,0 +1 @@
+export * from './graph-table-renderer';