@datarailsshared/dr_renderer 1.5.157 → 1.5.159

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datarailsshared/dr_renderer",
-  "version": "1.5.157",
+  "version": "1.5.159",
   "description": "DataRails charts and tables renderer",
   "keywords": [
     "datarails",
@@ -11,7 +11,10 @@
   "scripts": {
     "login": "npm login",
     "test": "jest --coverage",
-    "build:types": "npx tsc --build --verbose"
+    "build:types": "npx tsc --build --verbose",
+    "build:types:clean": "npx tsc --build --clean",
+    "watch": "npm run watch:types",
+    "watch:types": "npx tsc --build --watch"
   },
   "author": "Sergey Spivakov",
   "repository": {

package/src/charts/dr_donut_chart.d.ts

@@ -0,0 +1,79 @@
+export function DrDonutChart(highchartsRenderer: any, pivotData: any, opts: any, drilldownFunc: any, disableAnimation: any): void;
+export class DrDonutChart {
+    constructor(highchartsRenderer: any, pivotData: any, opts: any, drilldownFunc: any, disableAnimation: any);
+    render: () => any;
+    getConfig: () => {
+        chart: {
+            type: string;
+            events: {
+                drilldown: (e: any) => void;
+                drillup: (e: any) => void;
+                render: () => void;
+            };
+            animation: boolean;
+        };
+        plotOptions: {
+            series: {
+                animation: boolean;
+                dataLabels: {
+                    allowOverlap: any;
+                    enabled: any;
+                    formatter: any;
+                    style: any;
+                };
+                showInLegend: boolean;
+                innerSize: string;
+                states: {
+                    hover: {
+                        halo: {
+                            size: number;
+                        };
+                    };
+                };
+            };
+        };
+        colors: any;
+        tooltip: {
+            headerFormat: string;
+            pointFormatter: any;
+        };
+        legend: any;
+    };
+    getChartConfig: () => {
+        type: string;
+        events: {
+            drilldown: (e: any) => void;
+            drillup: (e: any) => void;
+            render: () => void;
+        };
+        animation: boolean;
+    };
+    getPlotOptionsConfig: () => {
+        series: {
+            animation: boolean;
+            dataLabels: {
+                allowOverlap: any;
+                enabled: any;
+                formatter: any;
+                style: any;
+            };
+            showInLegend: boolean;
+            innerSize: string;
+            states: {
+                hover: {
+                    halo: {
+                        size: number;
+                    };
+                };
+            };
+        };
+    };
+    getColorSettings: () => any;
+    getTooltipConfig: () => {
+        headerFormat: string;
+        pointFormatter: any;
+    };
+    drawTotalLabel: () => void;
+    setDrilldownConfig: (chartConfig: any) => void;
+    setChartPositioning: (chart: any) => void;
+}

package/src/charts/dr_gauge_categories_summary_chart.d.ts

@@ -0,0 +1,136 @@
+export function DrGaugeCategoriesSummaryChart(pivotData: any, opts: any): void;
+export class DrGaugeCategoriesSummaryChart {
+    constructor(pivotData: any, opts: any);
+    completionPercentage: number;
+    render: () => any;
+    createPlotBands: (options: any) => any;
+    getDefaultValueForChart: (type: any, existing_options: any) => any;
+    mergeOptions: (options: any) => any;
+    prepareSegments: (options: any) => void;
+    getCompletionPercentage: (options: any) => number;
+    clampValueToPane: (value: any, max?: any, min?: any) => number;
+    formatValueLabel: (value: any, options: any) => string;
+    createValueLabel: (chart: any, options: any) => any;
+    getPaneDimensions: (chart: any, options: any) => {
+        radius: number;
+        center: number[];
+    };
+    setPane: (chart: any, options: any) => void;
+    setCustomElements: (chart: any, options: any) => void;
+    updateCustomElements: (chart: any, options: any) => void;
+    moveCustomElementsToFront: (chart: any) => void;
+    configChart: () => {
+        title: {
+            text: null;
+        };
+        subtitle: null;
+        exporting: {
+            allowHTML: boolean;
+        };
+        tooltip: {
+            enabled: boolean;
+        };
+        chart: {
+            type: string;
+            backgroundColor: any;
+            plotBackgroundColor: null;
+            plotBackgroundImage: null;
+            plotBorderWidth: number;
+            plotShadow: boolean;
+            events: {
+                render: (event: any) => void;
+                beforeRedraw: (event: any) => void;
+                beforeRender: (event: any) => void;
+            };
+            margin: number[];
+            spacing: number[];
+        };
+        pane: {
+            startAngle: number;
+            endAngle: number;
+            background: null;
+            center: number[];
+        };
+        yAxis: {
+            min: any;
+            max: any;
+            tickPositions: any;
+            tickPosition: string;
+            tickColor: any;
+            tickLength: any;
+            tickWidth: any;
+            minorTickInterval: null;
+            labels: {
+                enabled: boolean;
+            };
+            lineWidth: number;
+            plotBands: any;
+        };
+        series: {
+            name: null;
+            data: number[];
+            dataLabels: {
+                enabled: boolean;
+            }[];
+            dial: {
+                radius: string;
+                backgroundColor: string;
+                baseWidth: number;
+                baseLength: string;
+                rearLength: string;
+            };
+            pivot: {
+                backgroundColor: string;
+                radius: any;
+            };
+        }[];
+    };
+    options: any;
+    aggregation: any;
+    format: any;
+    goal: any;
+    plotBands: any;
+    ticks: any;
+    value: any;
+    max: any;
+    min: any;
+}
+export namespace GAUGE_CATEGORIES_SUMMARY_OPTIONS_DEFAULT {
+    export namespace gauge {
+        let background: string;
+        let startAngle: number;
+        let endAngle: number;
+        let thickness: number;
+        let tickLength: number;
+        let tickWidth: number;
+        let valueOffset: number[];
+        let offset: number[];
+        let goalIcon: string;
+        let goalIconSize: number[];
+        namespace pivot {
+            let radius: number;
+            let color: string;
+        }
+        namespace colors {
+            let meta: string;
+            let goal: string;
+        }
+    }
+    export namespace goal_1 {
+        let title: string;
+        let value: number;
+    }
+    export { goal_1 as goal };
+    export let isAbsoluteValue: boolean;
+    export let segments: ({
+        title: string;
+        count: number;
+        isCompletionParameter: boolean;
+        color: string;
+    } | {
+        title: string;
+        count: number;
+        color: string;
+        isCompletionParameter?: undefined;
+    })[];
+}

package/src/charts/dr_gauge_chart.d.ts

@@ -0,0 +1,18 @@
+/**
+ * DrGaugeChart constructor function
+ */
+export function DrGaugeChart(pivotData: any, opts: any, isDynamicGoal?: any): any;
+
+export namespace DrGaugeChart {
+    let highchartsRenderer: any;
+    function getOptions(pivotData: any, opts: any, isDynamicGoal?: any): any;
+    function formatValue(data_type: any, number_format: any, value: any, widget_values_format: any): any;
+    function getTypeOptions(type: any, existing_options: any): any;
+    function ptCreateChartDrawData(pivotData: any, colors: any, onlyNumbers: any, isUniqueVals: any, additionOptions: any, opts: any, chartOptions: any): any;
+    function getAggregation(opts: any, aggfunc: any, base: any): any;
+    function getValue(pivotData: any, opts: any, isDynamicGoal?: boolean, isGoal?: boolean): any;
+    function getGoalTitleText(options: any): string;
+    function dynamicGoalFeatureEnabled(): boolean;
+}
+
+export const GAUGE_OPTIONS_DEFAULT: any;

package/src/charts/dr_gauge_chart.js

@@ -2,6 +2,23 @@ const _ = require('lodash');
 const { DrChartTooltip } = require("../dr_chart_tooltip");
 const helpers = require("../dr-renderer-helpers");
 
+/**
+ * @typedef {Object} DrGaugeChartInstance
+ * @property {function(): any} render
+ * @property {function(any, any, any, any): any} formatValue
+ * @property {function(any, any): void} setGoal
+ * @property {function(): any} configChart
+ * @property {any} options
+ * @property {any} goal
+ * @property {any} value
+ * @property {any} format
+ * @property {any} aggregation
+ * @property {any} plotBands
+ * @property {any} ticks
+ * @property {any} max
+ * @property {any} min
+ */
+
 const GAUGE_OPTIONS_DEFAULT = {
     gauge: {
         background: "#fff",
@@ -51,6 +68,14 @@ const GAUGE_OPTIONS_DEFAULT = {
     ],
 };
 
+/**
+ * DrGaugeChart constructor
+ * @constructor
+ * @param {any} pivotData
+ * @param {any} opts
+ * @param {any} isDynamicGoal
+ * @returns {DrGaugeChartInstance}
+ */
 function DrGaugeChart(pivotData, opts, isDynamicGoal) {
     this.render = function () {
         return DrGaugeChart.highchartsRenderer.ptCreateElementAndDraw(this.configChart(), opts);
@@ -528,6 +553,12 @@ function DrGaugeChart(pivotData, opts, isDynamicGoal) {
         return helpers.clamp(min - correction, value, max + correction);
     };
 
+    /**
+     * Sets the goal for the gauge chart.
+     * @param {any} pivotData - The pivot data
+     * @param {any} opts - Options
+     * @returns {void}
+     */
     this.setGoal = function (pivotData, opts) {
         if (isDynamicGoal) {
             this.options.goal = {

package/src/dr-renderer-helpers.d.ts

@@ -0,0 +1,18 @@
+export function capitalize(string: any): string;
+export function clamp(min: any, v: any, max: any): number;
+export function isNumber(n: any): boolean;
+export function mergeDeep(target: any, ...sources: any[]): any;
+export function removeSVGTextCorrection(svgEl: any, corr?: string): any;
+export function disableLegendInteractionIfRequired(chartOptions: any, additionOptions: any): void;
+export function isShowingEmptyValues(additionOptions: any): boolean;
+/**
+ * Waits for an element to appear in the DOM and executes a callback when found.
+ * If the element already exists, the callback is executed immediately.
+ * Otherwise, uses MutationObserver to watch for DOM changes until the element appears.
+ *
+ * @param {string} selector - CSS selector string to identify the target element
+ * @param {function(Element): void} callback - Function to execute when the element is found, receives the element as parameter
+ * @returns {void}
+ */
+export function onElementReady(selector: string, callback: (arg0: Element) => void): void;
+export const DELIMER: " , ";

package/src/dr-renderer-helpers.js

@@ -45,8 +45,8 @@ function mergeDeep(target, ...sources) {
 
 function removeSVGTextCorrection(svgEl, corr = 'yCorr') {
     Object.defineProperty(svgEl, corr, {
-        set: function() {},
-        get: function() {
+        set: function () { },
+        get: function () {
             return 0;
         }
     });

package/src/dr_pivottable.d.ts

@@ -0,0 +1,2 @@
+export = initDRPivotTable;
+declare function initDRPivotTable($: any, window: any, document: any): void;

package/src/dr_pivottable.js

@@ -1,12 +1,14 @@
 const { DR_SCENARIO, getSqAggregator } = require('./smart_queries_helper');
 const { DELIMER } = require('./dr-renderer-helpers');
 const { TooMuchDataError } = require('./errors');
+const freezePanes = require('./pivot-table/freeze-panes');
+const _ = require('lodash');
 
 let initDRPivotTable = function($, window, document) {
     var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
         hasProp = {}.hasOwnProperty;
 
-    var DRPivotData, processKey, SubtotalRenderer, getFormattedNumber, NovixRenderer;
+    var DRPivotData, SubtotalRenderer, getFormattedNumber, NovixRenderer;
     const newTableColors = ['rgb(127, 196, 255)', 'rgb(200, 243,243)', 'rgb(247, 161, 173)', 'rgb(255, 237, 178)', 'rgb(221, 239, 255)',
         'rgb(171, 216, 255)', 'rgb(174, 231, 220)', 'rgb(227, 255, 236)', 'rgb(162, 215, 227)', 'rgb(223, 239, 236)'];
 
@@ -195,36 +197,6 @@ let initDRPivotTable = function($, window, document) {
             }
         };
 
-        processKey = function(record, totals, keys, attrs, containsAverage, containsOthers, getAggregator) {
-            var addKey, attr, flatKey, k, key, len, ref;
-            key = [];
-            addKey = false;
-            for (k = 0, len = attrs.length; k < len; k++) {
-                attr = attrs[k];
-                key.push((ref = record[attr]) != null ? ref : "null");
-                flatKey = key.join(DELIMER);
-                if (!totals[flatKey]) {
-                    totals[flatKey] = getAggregator(key.slice());
-                    addKey = true;
-                }
-
-                if (containsAverage || containsOthers) {
-                    if (containsAverage && !containsOthers && key[0] === 'DR_Average') {
-                        totals[flatKey].push(record);
-                    }
-                    if (containsOthers && !containsAverage && key[0] === 'DR_Others') {
-                        totals[flatKey].push(record);
-                    }
-                } else {
-                    totals[flatKey].push(record);
-                }
-            }
-            if (addKey) {
-                keys.push(key);
-            }
-            return key;
-        };
-
         DRPivotData.prototype.getAttrsKeys = function(record, attrs) {
             const keys = [];
             for (let k = 0; k < attrs.length; k++) {
@@ -375,9 +347,12 @@ let initDRPivotTable = function($, window, document) {
 
             resultsArr.push($.pivotUtilities.novix_renderers["Pivot Table"](pvtData, opts));
 
-            // var wrapper = document.createElement("div");
-            // wrapper.className = "pivot-wrapper2";
-            // $(wrapper).append(resultsArr);
+            resultsArr.destroy = function() {
+                var container = opts.$el ? opts.$el.find(".widget-id-" + opts.widgetId).get(0) : null;
+                if (container && typeof container.destroy === 'function') {
+                    container.destroy();
+                }
+            };
 
             return resultsArr;
         } else {
@@ -399,20 +374,16 @@ let initDRPivotTable = function($, window, document) {
 
     SubtotalRenderer = function(pivotData, opts, charttype) {
         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 createTotalValsBolder, createGrandTotalBolder, getHeaderColorProperties, colorizeRowLabelHeaders, colorizeTableIfNeed, valueNoDashes, getColorsWithOffsetForTable, offsetColors, removeRowHeaderNullValue;
         var getAdditionalAggregation, buildAdditionalHeaderCols, buildAdditionalHeaderRows, buildAdditionalColValues, buildAdditionalRowValues, buildAdditionalRowTotals, buildAdditionalColTotals;
         var additionalFieldsCol, additionalFieldsRow, additionalFieldsList;
         var getExistingAggregator;
 
-        var horizontalFreezePaneClass = opts.chartOptions.table_options.freeze_panes ? ' horizontal-freeze-pane' : '';
-        var verticalFreezePaneClass = opts.chartOptions.table_options.freeze_panes ? ' vertical-freeze-pane' : '';
-        var axisFreezePaneClass = opts.chartOptions.table_options.freeze_panes ? ' axis-freeze-pane' : '';
-
-        var elementToTransform = {
-            X: horizontalFreezePaneClass,
-            Y: verticalFreezePaneClass,
-            XY: axisFreezePaneClass,
-        }
+        const freezePanesOptions = freezePanes.parseOptions(opts.chartOptions.table_options);
+        const freezePanesClasses = freezePanes.getClassStrings(freezePanesOptions);
+        const horizontalFreezePaneClass = freezePanesClasses.horizontal;
+        const verticalFreezePaneClass = freezePanesClasses.vertical;
+        const axisFreezePaneClass = freezePanesClasses.axis;
 
         additionalFieldsCol = [];
         additionalFieldsRow = [];
@@ -2259,32 +2230,6 @@ let initDRPivotTable = function($, window, document) {
             }
         };
 
-        handleFreezePanesScroll = function(freezableElements) {
-            return function(event) {
-                if (event.target.dataset.canFreezePanes) return;
-
-                const wrapper = event.target;
-
-                const translateY = `translate(0px, ${wrapper.scrollTop}px)`;
-                const translateX = `translate(${wrapper.scrollLeft}px, 0px)`;
-                const translateXY = `translate(${wrapper.scrollLeft}px, ${wrapper.scrollTop}px)`;
-
-                _.forEach(freezableElements, function (element) {
-                    let currentTranslate = translateY;
-                    currentTranslate = element.className.includes(elementToTransform.X) ? translateX : currentTranslate;
-                    currentTranslate = element.className.includes(elementToTransform.XY) ? translateXY : currentTranslate;
-                    element.style.transform = currentTranslate;
-                });
-            }
-        };
-
-        selectFreezableElements = function(wrapper) {
-            const selectString =_.map(_.values(elementToTransform), function (item) {
-                return `.${item.replace(' ', '')}`;
-            }).join(',');
-            return Array.from(wrapper.querySelectorAll(selectString));
-        }
-
         main = function(rowAttrs, rowKeys, colAttrs, colKeys, pivotData) {
             if (pivotData.isSmartQueriesEnabled) {
                 rowKeys = rowKeys.filter(rowKey => !rowKey.includes(DR_SCENARIO.SQ_Actuals));
@@ -2429,19 +2374,31 @@ let initDRPivotTable = function($, window, document) {
                 resultsArr.push(subTitle);
             }
 
-            var tableContainer = document.createElement("div");
+            const tableContainer = document.createElement("div");
             tableContainer.className = "pivot-div";
+            tableContainer.id = _.uniqueId("pivottable_");
             tableContainer.appendChild(result);
-            if (opts.chartOptions.table_options.freeze_panes) {
-                tableContainer.onscroll = handleFreezePanesScroll(selectFreezableElements(tableContainer));
-            }
             resultsArr.push(tableContainer);
 
-            var wrapper = document.createElement("div");
+            const wrapper = document.createElement("div");
             wrapper.className = "pivot-wrapper";
 
             $(wrapper).append(resultsArr);
 
+            let freezePanesResult = null;
+            if (freezePanesOptions.enabled) {
+                freezePanesResult = freezePanes.initialize(tableContainer, freezePanesOptions, {
+                    rowAttrsLength: rowAttrs.length
+                });
+            }
+
+            wrapper.destroy = function() {
+                if (freezePanesResult && typeof freezePanesResult.destroy === 'function') {
+                    freezePanesResult.destroy();
+                    freezePanesResult = null;
+                }
+            };
+
             return wrapper;
         };
         return main(rowAttrs, rowKeys, colAttrs, colKeys, pivotData);

package/src/errors.js

@@ -1,3 +1,4 @@
+// @ts-check
 /**
  * Enum for dr renderer error codes.
  * @readonly

package/src/{types/graph-table-renderer.d.ts → graph-table-renderer.d.ts}

@@ -1,6 +1,6 @@
 /**
  * @typedef {Object} HighChartsRenderer
- * @property {(rows: Rows, options: GTROptions | null, isTable: boolean, widget: any, pivotModel?: PivotModel) => string} rhPivotViewV2
+ * @property {(rows: Rows, options: GTROptions | null, isTable: boolean, widget: any, pivotModel?: PivotModel) => TableRenderResult} rhPivotViewV2
  */
 /**
  * @typedef {Object} PivotUtilities
@@ -24,6 +24,23 @@
 /**
  * @typedef {Record<string, Record<string, number | string> | number | string>[]} Rows - BE data response
  */
+/**
+ * Interface for objects with a destroy cleanup method
+ * @typedef {Object} Destroyable
+ * @property {() => void} destroy - Cleanup method to release resources
+ */
+/**
+ * HTMLElement enriched with library cleanup method
+ * @typedef {HTMLElement & Destroyable} DestroyableHTMLElement
+ */
+/**
+ * Array enriched with library cleanup method (used by NovixRenderer Handsontable path)
+ * @typedef {Array<any> & Destroyable} DestroyableArray
+ */
+/**
+ * Result from table rendering - can be a destroyable element, array, or string
+ * @typedef {DestroyableHTMLElement | DestroyableArray | string} TableRenderResult
+ */
 export class GraphTableRenderer {
     /**
      *
@@ -52,13 +69,28 @@ export class GraphTableRenderer {
      * @returns {any | null}
      */
     hcInstance(): any | null;
-    renderTable(widget?: null): string;
-    renderChart(widget?: null): string;
+    /**
+     * Renders table view of the data
+     * @param {any} [widget] - Widget configuration
+     * @returns {TableRenderResult} - Render result with destroy method for cleanup
+     */
+    renderTable(widget?: any): TableRenderResult;
+    renderChart(widget?: null): TableRenderResult;
+    /**
+     * Destroys the renderer instance and cleans up all resources.
+     * This includes:
+     * - Destroying the Highcharts instance (if exists)
+     * - Calling destroy on table result (freeze panes observers, Handsontable instances, etc.)
+     * - Disposing the pivot model
+     * - Resetting internal state
+     * @returns {void}
+     */
+    destroy(): void;
     #private;
 }
 export default GraphTableRenderer;
 export type HighChartsRenderer = {
-    rhPivotViewV2: (rows: Rows, options: GTROptions | null, isTable: boolean, widget: any, pivotModel?: PivotModel) => string;
+    rhPivotViewV2: (rows: Rows, options: GTROptions | null, isTable: boolean, widget: any, pivotModel?: PivotModel) => TableRenderResult;
 };
 export type PivotUtilities = {
     getPivotDataModel: (rows: Rows, options: GTROptions) => PivotModel;
@@ -77,3 +109,24 @@ export type GTROptions = {
  * - BE data response
  */
 export type Rows = Record<string, Record<string, number | string> | number | string>[];
+/**
+ * Interface for objects with a destroy cleanup method
+ */
+export type Destroyable = {
+    /**
+     * - Cleanup method to release resources
+     */
+    destroy: () => void;
+};
+/**
+ * HTMLElement enriched with library cleanup method
+ */
+export type DestroyableHTMLElement = HTMLElement & Destroyable;
+/**
+ * Array enriched with library cleanup method (used by NovixRenderer Handsontable path)
+ */
+export type DestroyableArray = Array<any> & Destroyable;
+/**
+ * Result from table rendering - can be a destroyable element, array, or string
+ */
+export type TableRenderResult = DestroyableHTMLElement | DestroyableArray | string;