@datarailsshared/dr_renderer 1.5.150 → 1.5.159

package/src/graph-table-renderer.js

@@ -1,6 +1,7 @@
+// @ts-check
 /**
  * @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
  */
 
 /**
@@ -31,6 +32,27 @@
  * @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 {
     /**
      * @type {PivotModel | undefined}
@@ -69,6 +91,12 @@ export class GraphTableRenderer {
      */
     #hcInstance = null;
 
+    /**
+     * Stores the table render result for cleanup
+     * @type {TableRenderResult | null}
+     */
+    #tableResult = null;
+
     /**
      * 
      * @param {HighChartsRenderer} hcr 
@@ -131,8 +159,15 @@ export class GraphTableRenderer {
         delete this.#options.rendererOptions.hcInstance;
     }
 
+    /**
+     * Renders table view of the data
+     * @param {any} [widget] - Widget configuration
+     * @returns {TableRenderResult} - Render result with destroy method for cleanup
+     */
     renderTable(widget = null) {
-        return this.#hcr.rhPivotViewV2(this.#rows, this.#options, true, widget, this.#pivotModel);
+        const result = this.#hcr.rhPivotViewV2(this.#rows, this.#options, true, widget, this.#pivotModel);
+        this.#tableResult = result;
+        return result;
     }
 
     renderChart(widget = null) {
@@ -142,6 +177,43 @@ export class GraphTableRenderer {
         });
         return chart;
     }
+
+    /**
+     * 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() {
+        if (this.#hcInstance && typeof this.#hcInstance.destroy === 'function') {
+            try {
+                this.#hcInstance.destroy();
+            } catch (e) {
+                console.warn('[dr_renderer] Error destroying Highcharts instance:', e);
+            }
+        }
+        this.#hcInstance = null;
+
+        if (this.#tableResult && typeof this.#tableResult !== 'string') {
+            const result = /** @type {Destroyable} */ (this.#tableResult);
+            if (typeof result.destroy === 'function') {
+                try {
+                    result.destroy();
+                } catch (e) {
+                    console.warn('[dr_renderer] Error destroying table result:', e);
+                }
+            }
+        }
+        this.#tableResult = null;
+
+        this.disposePivotModel();
+
+        this.#options = null;
+        this.#rows = [];
+    }
 }
 
 export default GraphTableRenderer;

package/src/highcharts_renderer.d.ts

@@ -0,0 +1,5 @@
+export = getHighchartsRenderer;
+/**
+ * @param {EnvironmentOptions} envOptions
+ */
+declare function getHighchartsRenderer($: any, document: any, Highcharts: any, default_colors: any, highchartsRenderer: any, DataFormatter: any, lodash: any, moment_lib: any, isNewAngular: any, envOptions: EnvironmentOptions): any;

package/src/highcharts_renderer.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 const helpers = require('./dr-renderer-helpers');
 const { DrGaugeChart, GAUGE_OPTIONS_DEFAULT } = require('./charts/dr_gauge_chart');
 const { DrDonutChart } = require('./charts/dr_donut_chart');

package/src/index.d.ts

@@ -1,86 +1,83 @@
-export * from './types';
-import DataFormatterType = require('./dataformatter');
-import * as ErrorTypes from './types/errors';
-import * as OptionsTypes from './types/options/index';
-import { GraphTableRenderer as GraphTableRendererClass } from './types/graph-table-renderer';
-
-declare module '*.css' {
-    const content: { [className: string]: string };
-    export default content;
-}
-
-declare namespace DrRenderFactory {
-    interface ColorsOptions {
-        colors: string[];
-        variance_color: string | null;
-    }
-
-    interface InitOptions {
-        $: any;
-        window: Window;
-        document: Document;
-        Handsontable?: any;
-    }
-
-    interface HighchartsRendererOptions {
-        $: any;
-        document: Document;
-        Highcharts: any;
-        default_colors: ColorsOptions;
-        highchartsRenderer: any;
-        lodash: any;
-        moment_lib: any;
-        isNewAngular: boolean;
-    }
-
-    interface EnvironmentOptions {
-        features?: string[];
-        disable_animation?: boolean;
-        fiscal_year_starts_from?: number;
-        fiscal_year_back?: boolean;
-        enableStackedPercentCharts?: boolean;
-
-        /** TODO: remove in DR-42736 */
-        enabledNewWidgetValueFormatting?: boolean;
-
-        /** Allow specifying custom gauge goal title */
-        enableGaugeDynamicGoal?: boolean;
-    }
-
-    interface Factory {
-        init($: any, window: Window, document: Document, Handsontable?: any): void;
-        getInitHighchartsRenderer(
-            $: any,
-            document: Document,
-            Highcharts: any,
-            default_colors: ColorsOptions,
-            highchartsRenderer: any,
-            lodash: any,
-            moment_lib: any,
-            isNewAngular: boolean,
-            envOptions?: EnvironmentOptions
-        ): any;
-        getInitPublishedItemsRenderer(publishedItemsRenderer: any, bind?: any): any;
-
-        DataFormatter: typeof DataFormatterType;
-
-        // Options builder module
-        options: typeof OptionsTypes;
-
-        // Error types and classes
-        RendererErrorCodes: typeof ErrorTypes.RendererErrorCodes;
-        BaseRendererError: typeof ErrorTypes.BaseRendererError;
-        TooMuchDataError: typeof ErrorTypes.TooMuchDataError;
-        NoDataError: typeof ErrorTypes.NoDataError;
-        DataConflictError: typeof ErrorTypes.DataConflictError;
-        GaugeConfigurationError: typeof ErrorTypes.GaugeConfigurationError;
-        GenericRenderingError: typeof ErrorTypes.GenericRenderingError;
-        GenericComputationalError: typeof ErrorTypes.GenericComputationalError;
-
-        // GraphTableRenderer class
-        GraphTableRenderer: typeof GraphTableRendererClass;
-    }
-}
-
-declare const dr_render_factory: DrRenderFactory.Factory;
-export = dr_render_factory;
+/**
+ * Sets the freeze panes mode globally.
+ * Call this before rendering tables to change the freeze panes behavior.
+ * @param {import('./pivot-table/freeze-panes/constants').FreezePanesMode} mode - 'transform' (legacy) or 'sticky' (native CSS)
+ * @returns {void}
+ */
+export function setFreezePanesMode(mode: import("./pivot-table/freeze-panes/constants").FreezePanesMode): void;
+/**
+ * Initializes the DR renderer with required dependencies.
+ * @param {*} $ - jQuery instance
+ * @param {Window & { DataFormatter?: any }} window - Window object
+ * @param {Document} document - Document object
+ * @param {*} [Handsontable] - Optional Handsontable instance
+ * @returns {void}
+ */
+export function init($: any, window: Window & {
+    DataFormatter?: any;
+}, document: Document, Handsontable?: any): void;
+/**
+ * Creates and initializes a Highcharts renderer.
+ * @param {*} $ - jQuery instance
+ * @param {Document} document - Document object
+ * @param {*} Highcharts - Highcharts library
+ * @param {ColorsOptions} default_colors - Default color configuration
+ * @param {*} highchartsRenderer - Highcharts renderer instance
+ * @param {*} lodash - Lodash library
+ * @param {*} moment_lib - Moment.js library
+ * @param {boolean} isNewAngular - Whether using new Angular
+ * @param {EnvironmentOptions} [envOptions] - Environment configuration
+ * @returns {*}
+ */
+export function getInitHighchartsRenderer($: any, document: Document, Highcharts: any, default_colors: ColorsOptions, highchartsRenderer: any, lodash: any, moment_lib: any, isNewAngular: boolean, envOptions?: EnvironmentOptions): any;
+/**
+ * Creates and initializes a published items renderer.
+ * @param {*} publishedItemsRenderer - Published items renderer
+ * @param {Object} [bind={}] - Bind context
+ * @returns {*}
+ */
+export function getInitPublishedItemsRenderer(publishedItemsRenderer: any, bind?: Object): any;
+import DataFormatter = require("./dataformatter");
+import options = require("./options");
+import { GraphTableRenderer } from "./graph-table-renderer";
+export type ColorsOptions = {
+    /**
+     * - Array of color hex codes
+     */
+    colors: string[];
+    /**
+     * - Color for variance display
+     */
+    variance_color: string | null;
+};
+export type EnvironmentOptions = {
+    /**
+     * - Enabled feature flags
+     */
+    features?: string[] | undefined;
+    /**
+     * - Disable chart animations
+     */
+    disable_animation?: boolean | undefined;
+    /**
+     * - Fiscal year start month
+     */
+    fiscal_year_starts_from?: number | undefined;
+    /**
+     * - Fiscal year direction
+     */
+    fiscal_year_back?: boolean | undefined;
+    /**
+     * - Enable stacked percent charts
+     */
+    enableStackedPercentCharts?: boolean | undefined;
+    /**
+     * - TODO: remove in DR-42736
+     */
+    enabledNewWidgetValueFormatting?: boolean | undefined;
+    /**
+     * - Allow custom gauge goal title
+     */
+    enableGaugeDynamicGoal?: boolean | undefined;
+};
+export { DataFormatter, options, RendererErrorCodes, BaseRendererError, TooMuchDataError, NoDataError, DataConflictError, GaugeConfigurationError, GenericRenderingError, GenericComputationalError, GraphTableRenderer, FREEZE_PANES_MODES };

package/src/index.js

@@ -1,3 +1,4 @@
+// @ts-check
 const getPublishedItemsRenderer = require('./published_items_renderer');
 const getHighchartsRenderer = require('./highcharts_renderer');
 const initDRPivotTable = require('./dr_pivottable');
@@ -6,9 +7,45 @@ const DataFormatter = require('./dataformatter');
 const errors = require('./errors');
 const options = require('./options');
 const { GraphTableRenderer } = require('./graph-table-renderer');
+const freezePanes = require('./pivot-table/freeze-panes');
+
+/**
+ * @typedef {Object} ColorsOptions
+ * @property {string[]} colors - Array of color hex codes
+ * @property {string|null} variance_color - Color for variance display
+ */
+
+/**
+ * @typedef {Object} EnvironmentOptions
+ * @property {string[]} [features] - Enabled feature flags
+ * @property {boolean} [disable_animation] - Disable chart animations
+ * @property {number} [fiscal_year_starts_from] - Fiscal year start month
+ * @property {boolean} [fiscal_year_back] - Fiscal year direction
+ * @property {boolean} [enableStackedPercentCharts] - Enable stacked percent charts
+ * @property {boolean} [enabledNewWidgetValueFormatting] - TODO: remove in DR-42736
+ * @property {boolean} [enableGaugeDynamicGoal] - Allow custom gauge goal title
+ */
 
 let dr_render_factory = {};
 
+/**
+ * Sets the freeze panes mode globally.
+ * Call this before rendering tables to change the freeze panes behavior.
+ * @param {import('./pivot-table/freeze-panes/constants').FreezePanesMode} mode - 'transform' (legacy) or 'sticky' (native CSS)
+ * @returns {void}
+ */
+dr_render_factory.setFreezePanesMode = function(mode) {
+    freezePanes.setMode(mode);
+};
+
+/**
+ * Initializes the DR renderer with required dependencies.
+ * @param {*} $ - jQuery instance
+ * @param {Window & { DataFormatter?: any }} window - Window object
+ * @param {Document} document - Document object
+ * @param {*} [Handsontable] - Optional Handsontable instance
+ * @returns {void}
+ */
 dr_render_factory.init = function($, window, document, Handsontable){
     window.DataFormatter = DataFormatter;
     initDRPivotTable($, window, document);
@@ -17,31 +54,68 @@ dr_render_factory.init = function($, window, document, Handsontable){
     }
 }
 
+/**
+ * Creates and initializes a Highcharts renderer.
+ * @param {*} $ - jQuery instance
+ * @param {Document} document - Document object
+ * @param {*} Highcharts - Highcharts library
+ * @param {ColorsOptions} default_colors - Default color configuration
+ * @param {*} highchartsRenderer - Highcharts renderer instance
+ * @param {*} lodash - Lodash library
+ * @param {*} moment_lib - Moment.js library
+ * @param {boolean} isNewAngular - Whether using new Angular
+ * @param {EnvironmentOptions} [envOptions] - Environment configuration
+ * @returns {*}
+ */
 dr_render_factory.getInitHighchartsRenderer = function($, document, Highcharts, default_colors, highchartsRenderer, lodash, moment_lib, isNewAngular, envOptions){
     return getHighchartsRenderer($, document, Highcharts, default_colors, highchartsRenderer, DataFormatter, lodash, moment_lib, isNewAngular, envOptions);
 }
 
+/**
+ * Creates and initializes a published items renderer.
+ * @param {*} publishedItemsRenderer - Published items renderer
+ * @param {Object} [bind={}] - Bind context
+ * @returns {*}
+ */
 dr_render_factory.getInitPublishedItemsRenderer = function (publishedItemsRenderer, bind = {}) {
     return getPublishedItemsRenderer.bind(bind)(publishedItemsRenderer);
 }
 
+/** @type {typeof import('./dataformatter')} */
 dr_render_factory.DataFormatter = DataFormatter;
 
-// Export options builder module
+/** @type {typeof import('./options')} */
 dr_render_factory.options = options;
 
-// Export error types and classes
+/** @type {typeof import('./errors').RendererErrorCodes} */
 dr_render_factory.RendererErrorCodes = errors.RendererErrorCodes;
+
+/** @type {typeof import('./errors').BaseRendererError} */
 dr_render_factory.BaseRendererError = errors.BaseRendererError;
+
+/** @type {typeof import('./errors').TooMuchDataError} */
 dr_render_factory.TooMuchDataError = errors.TooMuchDataError;
+
+/** @type {typeof import('./errors').NoDataError} */
 dr_render_factory.NoDataError = errors.NoDataError;
+
+/** @type {typeof import('./errors').DataConflictError} */
 dr_render_factory.DataConflictError = errors.DataConflictError;
+
+/** @type {typeof import('./errors').GaugeConfigurationError} */
 dr_render_factory.GaugeConfigurationError = errors.GaugeConfigurationError;
+
+/** @type {typeof import('./errors').GenericRenderingError} */
 dr_render_factory.GenericRenderingError = errors.GenericRenderingError;
+
+/** @type {typeof import('./errors').GenericComputationalError} */
 dr_render_factory.GenericComputationalError = errors.GenericComputationalError;
 
-// Export GraphTableRenderer class
+/** @type {typeof import('./graph-table-renderer').GraphTableRenderer} */
 dr_render_factory.GraphTableRenderer = GraphTableRenderer;
 
+/** @type {typeof import('./pivot-table/freeze-panes').FREEZE_PANES_MODES} */
+dr_render_factory.FREEZE_PANES_MODES = freezePanes.FREEZE_PANES_MODES;
+
 //const $ = require( "jquery" )( window );
 module.exports = dr_render_factory;

package/src/novix_renderer.d.ts

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

package/src/novix_renderer.js

@@ -858,6 +858,13 @@ let initNovixRenderer = function($, window, document, Handsontable){
                     }
                 });
 
+                $tableArea.get(0).destroy = function() {
+                    if (table && typeof table.destroy === 'function') {
+                        table.destroy();
+                        table = null;
+                    }
+                };
+
                 setTimeout(function () {
 
                     var currentState = opts.$el.data("currentState");

package/src/options/builders.js

@@ -1,3 +1,4 @@
+// @ts-check
 /**
  * @fileoverview Option builder functions for chart suboptions.
  * Each builder creates a complete suboption definition that can be used

package/src/options/constants.js

@@ -1,3 +1,4 @@
+// @ts-check
 /**
  * @fileoverview Shared constants for chart options builders.
  * These constants define default values for fonts, colors, and styling

package/src/options/elements.js

@@ -1,3 +1,4 @@
+// @ts-check
 /**
  * @fileoverview UI element factory functions for chart suboptions.
  * Provides reusable factories to create consistent element definitions

package/src/options/helpers.js

@@ -1,3 +1,4 @@
+// @ts-check
 /**
  * @fileoverview Helper functions for chart options.
  * Contains utility functions used by option builders.

package/src/options/index.js

@@ -1,3 +1,4 @@
+// @ts-check
 /**
  * @fileoverview Chart Options Builder API
  *

package/src/options/presets.js

@@ -1,3 +1,4 @@
+// @ts-check
 /**
  * @fileoverview Chart-specific option presets.
  * Defines which suboptions are available for each chart type.

package/src/pivot-table/freeze-panes/constants.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Freeze panes mode type.
+ */
+export type FreezePanesMode = "transform" | "sticky";
+export namespace FREEZE_PANES_MODES {
+    let TRANSFORM: "transform";
+    let STICKY: "sticky";
+}
+export namespace TRANSFORM_CSS_CLASSES {
+    let AXIS: string;
+    let VERTICAL: string;
+    let HORIZONTAL: string;
+}
+export namespace STICKY_CSS_CLASSES {
+    export let CONTAINER: string;
+    let AXIS_1: string;
+    export { AXIS_1 as AXIS };
+    let VERTICAL_1: string;
+    export { VERTICAL_1 as VERTICAL };
+    let HORIZONTAL_1: string;
+    export { HORIZONTAL_1 as HORIZONTAL };
+    export let ROWS_DISABLED: string;
+    export let COLUMNS_DISABLED: string;
+}
+export const FREEZE_PANES_THRESHOLD: 0.7;
+export const FREEZE_PANES_THRESHOLD_CHECK_DEBOUNCE_MS: 150;

package/src/pivot-table/freeze-panes/constants.js

@@ -0,0 +1,42 @@
+// @ts-check
+/**
+ * @fileoverview Constants for freeze panes functionality.
+ * @module @datarailsshared/dr_renderer/pivot-table/freeze-panes/constants
+ */
+
+/**
+ * Freeze panes mode type.
+ * @typedef {'transform' | 'sticky'} FreezePanesMode
+ */
+
+const FREEZE_PANES_MODES = {
+    TRANSFORM: /** @type {'transform'} */ ('transform'),
+    STICKY: /** @type {'sticky'} */ ('sticky'),
+};
+
+const TRANSFORM_CSS_CLASSES = {
+    AXIS: 'axis-freeze-pane',
+    VERTICAL: 'vertical-freeze-pane',
+    HORIZONTAL: 'horizontal-freeze-pane',
+};
+
+const STICKY_CSS_CLASSES = {
+    CONTAINER: 'sticky-freeze-panes-container',
+    AXIS: 'sticky-axis-freeze-pane',
+    VERTICAL: 'sticky-vertical-freeze-pane',
+    HORIZONTAL: 'sticky-horizontal-freeze-pane',
+    ROWS_DISABLED: 'freeze-panes-rows-disabled',
+    COLUMNS_DISABLED: 'freeze-panes-columns-disabled',
+};
+
+const FREEZE_PANES_THRESHOLD = 0.7;
+
+const FREEZE_PANES_THRESHOLD_CHECK_DEBOUNCE_MS = 150;
+
+module.exports = {
+    FREEZE_PANES_MODES,
+    TRANSFORM_CSS_CLASSES,
+    STICKY_CSS_CLASSES,
+    FREEZE_PANES_THRESHOLD,
+    FREEZE_PANES_THRESHOLD_CHECK_DEBOUNCE_MS,
+};