@datarailsshared/dr_renderer 1.5.150 → 1.5.159

package/src/pivot-table/freeze-panes/sticky-strategy.js

@@ -0,0 +1,247 @@
+// @ts-check
+/**
+ * @fileoverview Sticky-based freeze panes strategy.
+ * Uses CSS position: sticky to keep headers in place during scrolling.
+ * @module @datarailsshared/dr_renderer/pivot-table/freeze-panes/sticky-strategy
+ */
+
+const { STICKY_CSS_CLASSES, FREEZE_PANES_THRESHOLD, FREEZE_PANES_THRESHOLD_CHECK_DEBOUNCE_MS } = require('./constants');
+
+/**
+ * CSS class strings for freeze pane elements.
+ * @typedef {import('./index').FreezePanesClassStrings} FreezePanesClassStrings
+ */
+
+/**
+ * Table information for freeze panes initialization.
+ * @typedef {import('./index').FreezePanesTableInfo} FreezePanesTableInfo
+ */
+
+/**
+ * Result of freeze panes initialization.
+ * @typedef {import('./index').FreezePanesInitResult} FreezePanesInitResult
+ */
+
+/**
+ * Threshold check result indicating which freeze behaviors are enabled.
+ * @typedef {Object} ThresholdResult
+ * @property {boolean} freezeRows - Whether rows should be frozen (vertical sticky).
+ * @property {boolean} freezeColumns - Whether columns should be frozen (horizontal sticky).
+ */
+
+/**
+ * Creates a debounced version of a function.
+ * @param {() => void} func - The function to debounce.
+ * @param {number} wait - The number of milliseconds to delay.
+ * @returns {() => void} The debounced function.
+ */
+function debounce(func, wait) {
+    /** @type {ReturnType<typeof setTimeout> | undefined} */
+    let timeout;
+    return function executedFunction() {
+        clearTimeout(timeout);
+        timeout = setTimeout(() => func(), wait);
+    };
+}
+
+/**
+ * Gets class strings for sticky mode.
+ * @param {boolean} enabled - Whether freeze panes is enabled.
+ * @returns {FreezePanesClassStrings} Object with horizontal, vertical, and axis class strings.
+ */
+function getClassStrings(enabled) {
+    if (!enabled) {
+        return { horizontal: '', vertical: '', axis: '' };
+    }
+    return {
+        horizontal: ' ' + STICKY_CSS_CLASSES.HORIZONTAL,
+        vertical: ' ' + STICKY_CSS_CLASSES.VERTICAL,
+        axis: ' ' + STICKY_CSS_CLASSES.AXIS,
+    };
+}
+
+/**
+ * Applies the sticky container class to enable proper sticky behavior.
+ * @param {HTMLElement} container - The container element.
+ * @returns {void}
+ */
+function applyContainerClass(container) {
+    container.classList.add(STICKY_CSS_CLASSES.CONTAINER);
+}
+
+/**
+ * Calculates the width of each frozen column level by examining cells with rowcol classes.
+ * This handles subtotal rows where multiple <tr> elements share the same row class.
+ * @param {HTMLTableSectionElement} tbody - The table body element.
+ * @param {number} rowAttrsLength - Number of row attributes (frozen columns).
+ * @returns {number[]} Array of widths for each column level.
+ */
+function getColumnWidths(tbody, rowAttrsLength) {
+    if (!tbody || rowAttrsLength === 0) return [];
+
+    const widths = new Array(rowAttrsLength).fill(0);
+
+    const horizontalCells = tbody.querySelectorAll('.' + STICKY_CSS_CLASSES.HORIZONTAL);
+
+    horizontalCells.forEach(function (cell) {
+        if (cell.classList.contains('pvtRowSubtotal')) return;
+
+        for (let i = 0; i < rowAttrsLength; i++) {
+            if (cell.classList.contains('rowcol' + i)) {
+                widths[i] = Math.max(widths[i], /** @type {HTMLElement} */(cell).offsetWidth);
+                break;
+            }
+        }
+    });
+
+    return widths;
+}
+
+/**
+ * Checks if freeze panes should be disabled based on threshold.
+ * @param {HTMLElement} container - The container element.
+ * @param {HTMLTableElement} table - The table element.
+ * @param {number} rowAttrsLength - Number of row attributes (columns in row headers).
+ * @returns {ThresholdResult} Object with freezeRows and freezeColumns booleans.
+ */
+function checkThreshold(container, table, rowAttrsLength) {
+    const containerWidth = container.clientWidth;
+    const containerHeight = container.clientHeight;
+
+    if (containerWidth === 0 || containerHeight === 0) {
+        return { freezeRows: true, freezeColumns: true };
+    }
+
+    let frozenRowsHeight = 0;
+    const thead = table.querySelector('thead');
+    if (thead) {
+        const headerRows = thead.querySelectorAll('tr');
+        headerRows.forEach(function (row) {
+            frozenRowsHeight += row.offsetHeight;
+        });
+    }
+
+    let frozenColumnsWidth = 0;
+    const tbody = table.querySelector('tbody');
+    if (tbody && rowAttrsLength > 0) {
+        const columnWidths = getColumnWidths(tbody, rowAttrsLength);
+        frozenColumnsWidth = columnWidths.reduce(function (sum, width) {
+            return sum + width;
+        }, 0);
+    }
+
+    return {
+        freezeRows: frozenRowsHeight / containerHeight < FREEZE_PANES_THRESHOLD,
+        freezeColumns: rowAttrsLength === 0 || frozenColumnsWidth / containerWidth < FREEZE_PANES_THRESHOLD
+    };
+}
+
+/**
+ * Calculates and applies sticky positions for multi-level headers.
+ * @param {HTMLTableElement} table - The table element.
+ * @param {number} rowAttrsLength - Number of row attributes (columns in row headers).
+ * @param {ThresholdResult} [options] - Options for freeze panes.
+ * @returns {void}
+ */
+function calculateStickyPositions(table, rowAttrsLength, options) {
+    if (!table) return;
+
+    const freezeRows = options ? options.freezeRows : true;
+    const freezeColumns = options ? options.freezeColumns : true;
+
+    const thead = table.querySelector('thead');
+
+    if (thead && freezeRows) {
+        const headerRows = thead.querySelectorAll('tr');
+        let topOffset = 0;
+        headerRows.forEach(function (row) {
+            const cells = row.querySelectorAll('th, td');
+            let leftOffset = 0;
+
+            cells.forEach(function (cell) {
+                if (cell.classList.contains(STICKY_CSS_CLASSES.VERTICAL) ||
+                    cell.classList.contains(STICKY_CSS_CLASSES.AXIS)) {
+                    /** @type {HTMLElement} */ (cell).style.top = topOffset + 'px';
+                }
+                if (cell.classList.contains(STICKY_CSS_CLASSES.AXIS) && freezeColumns) {
+                    /** @type {HTMLElement} */ (cell).style.left = leftOffset + 'px';
+                    leftOffset += /** @type {HTMLElement} */ (cell).offsetWidth;
+                }
+            });
+
+            topOffset += row.offsetHeight;
+        });
+    }
+
+    const tbody = table.querySelector('tbody');
+    if (tbody && rowAttrsLength > 0 && freezeColumns) {
+        const columnWidths = getColumnWidths(tbody, rowAttrsLength);
+        const leftOffsets = [0];
+        for (let i = 1; i < rowAttrsLength; i++) {
+            leftOffsets[i] = leftOffsets[i - 1] + columnWidths[i - 1];
+        }
+
+        const horizontalCells = tbody.querySelectorAll('.' + STICKY_CSS_CLASSES.HORIZONTAL);
+        horizontalCells.forEach(function (cell) {
+            for (let i = 0; i < rowAttrsLength; i++) {
+                if (cell.classList.contains('rowcol' + i)) {
+                    /** @type {HTMLElement} */ (cell).style.left = leftOffsets[i] + 'px';
+                    break;
+                }
+            }
+        });
+    }
+}
+
+/**
+ * Applies threshold check and toggles freeze panes classes accordingly.
+ * @param {HTMLElement} container - The container element.
+ * @param {HTMLTableElement} table - The table element.
+ * @param {number} rowAttrsLength - Number of row attributes (columns in row headers).
+ * @returns {void}
+ */
+function applyThreshold(container, table, rowAttrsLength) {
+    const thresholdResult = checkThreshold(container, table, rowAttrsLength);
+
+    table.classList.toggle(STICKY_CSS_CLASSES.ROWS_DISABLED, !thresholdResult.freezeRows);
+    table.classList.toggle(STICKY_CSS_CLASSES.COLUMNS_DISABLED, !thresholdResult.freezeColumns);
+    calculateStickyPositions(table, rowAttrsLength, thresholdResult);
+}
+
+/**
+ * Initializes the sticky strategy.
+ * @param {HTMLElement} container - The container element.
+ * @param {FreezePanesTableInfo} tableInfo - Table information.
+ * @returns {FreezePanesInitResult} Object with destroy function to clean up the observer.
+ */
+function initialize(container, tableInfo) {
+    applyContainerClass(container);
+
+    const table = /** @type {HTMLTableElement | null} */ (container.querySelector('table.pvtTable'));
+
+    if (!table) {
+        return { destroy: function () { } };
+    }
+
+    const rowAttrsLength = tableInfo.rowAttrsLength || 0;
+
+    applyThreshold(container, table, rowAttrsLength);
+
+    const debouncedApplyThreshold = debounce(function () {
+        applyThreshold(container, table, rowAttrsLength);
+    }, FREEZE_PANES_THRESHOLD_CHECK_DEBOUNCE_MS);
+
+    const resizeObserver = new ResizeObserver(debouncedApplyThreshold);
+    resizeObserver.observe(container);
+
+    return {
+        destroy: function () {
+            resizeObserver.disconnect();
+        }
+    };
+}
+
+module.exports = {
+    getClassStrings,
+    initialize,
+};

package/src/pivot-table/freeze-panes/transform-strategy.d.ts

@@ -0,0 +1,61 @@
+/**
+ * CSS class strings for freeze pane elements.
+ */
+export type FreezePanesClassStrings = import("./index").FreezePanesClassStrings;
+/**
+ * Table information for freeze panes initialization.
+ */
+export type FreezePanesTableInfo = import("./index").FreezePanesTableInfo;
+/**
+ * Result of freeze panes initialization.
+ */
+export type FreezePanesInitResult = import("./index").FreezePanesInitResult;
+/**
+ * Mapping of axis types to CSS class names.
+ */
+export type AxisToClassMap = {
+    /**
+     * - CSS class for horizontal freeze.
+     */
+    X: string;
+    /**
+     * - CSS class for vertical freeze.
+     */
+    Y: string;
+    /**
+     * - CSS class for both axes freeze.
+     */
+    XY: string;
+};
+/**
+ * CSS class strings for freeze pane elements.
+ * @typedef {import('./index').FreezePanesClassStrings} FreezePanesClassStrings
+ */
+/**
+ * Table information for freeze panes initialization.
+ * @typedef {import('./index').FreezePanesTableInfo} FreezePanesTableInfo
+ */
+/**
+ * Result of freeze panes initialization.
+ * @typedef {import('./index').FreezePanesInitResult} FreezePanesInitResult
+ */
+/**
+ * Mapping of axis types to CSS class names.
+ * @typedef {Object} AxisToClassMap
+ * @property {string} X - CSS class for horizontal freeze.
+ * @property {string} Y - CSS class for vertical freeze.
+ * @property {string} XY - CSS class for both axes freeze.
+ */
+/**
+ * Gets class strings for transform mode.
+ * @param {boolean} enabled - Whether freeze panes is enabled.
+ * @returns {FreezePanesClassStrings} Object with horizontal, vertical, and axis class strings.
+ */
+export function getClassStrings(enabled: boolean): FreezePanesClassStrings;
+/**
+ * Initializes the transform strategy.
+ * @param {HTMLElement} container - The container element.
+ * @param {FreezePanesTableInfo} [_tableInfo] - Table information (unused in transform strategy).
+ * @returns {FreezePanesInitResult} Object with destroy function to clean up the scroll handler.
+ */
+export function initialize(container: HTMLElement, _tableInfo?: FreezePanesTableInfo): FreezePanesInitResult;

package/src/pivot-table/freeze-panes/transform-strategy.js

@@ -0,0 +1,131 @@
+// @ts-check
+/**
+ * @fileoverview Transform-based freeze panes strategy.
+ * Uses CSS transforms to keep headers in place during scrolling.
+ * @module @datarailsshared/dr_renderer/pivot-table/freeze-panes/transform-strategy
+ */
+
+const { TRANSFORM_CSS_CLASSES } = require('./constants');
+
+/**
+ * CSS class strings for freeze pane elements.
+ * @typedef {import('./index').FreezePanesClassStrings} FreezePanesClassStrings
+ */
+
+/**
+ * Table information for freeze panes initialization.
+ * @typedef {import('./index').FreezePanesTableInfo} FreezePanesTableInfo
+ */
+
+/**
+ * Result of freeze panes initialization.
+ * @typedef {import('./index').FreezePanesInitResult} FreezePanesInitResult
+ */
+
+/**
+ * Mapping of axis types to CSS class names.
+ * @typedef {Object} AxisToClassMap
+ * @property {string} X - CSS class for horizontal freeze.
+ * @property {string} Y - CSS class for vertical freeze.
+ * @property {string} XY - CSS class for both axes freeze.
+ */
+
+/**
+ * Gets class strings for transform mode.
+ * @param {boolean} enabled - Whether freeze panes is enabled.
+ * @returns {FreezePanesClassStrings} Object with horizontal, vertical, and axis class strings.
+ */
+function getClassStrings(enabled) {
+    if (!enabled) {
+        return { horizontal: '', vertical: '', axis: '' };
+    }
+    return {
+        horizontal: ' ' + TRANSFORM_CSS_CLASSES.HORIZONTAL,
+        vertical: ' ' + TRANSFORM_CSS_CLASSES.VERTICAL,
+        axis: ' ' + TRANSFORM_CSS_CLASSES.AXIS,
+    };
+}
+
+/**
+ * Mapping of axis types to class names.
+ * @type {AxisToClassMap}
+ */
+const elementToTransform = {
+    X: ' ' + TRANSFORM_CSS_CLASSES.HORIZONTAL,
+    Y: ' ' + TRANSFORM_CSS_CLASSES.VERTICAL,
+    XY: ' ' + TRANSFORM_CSS_CLASSES.AXIS,
+};
+
+/**
+ * Selects all freezable elements within a container.
+ * @param {HTMLElement} wrapper - The container element.
+ * @returns {HTMLElement[]} Array of freezable elements.
+ */
+function selectFreezableElements(wrapper) {
+    const selectString = Object.values(elementToTransform)
+        .map(function(item) {
+            return '.' + item.replace(' ', '');
+        })
+        .join(',');
+    return /** @type {HTMLElement[]} */ (Array.from(wrapper.querySelectorAll(selectString)));
+}
+
+/**
+ * Creates a scroll handler for freeze panes.
+ * @param {HTMLElement[]} freezableElements - Elements to transform on scroll.
+ * @returns {(event: Event) => void} Scroll event handler.
+ */
+function createScrollHandler(freezableElements) {
+    return function(event) {
+        const target = /** @type {HTMLElement & { dataset: DOMStringMap }} */ (event.target);
+        if (target.dataset.canFreezePanes) return;
+
+        const wrapper = target;
+
+        const translateY = 'translate(0px, ' + wrapper.scrollTop + 'px)';
+        const translateX = 'translate(' + wrapper.scrollLeft + 'px, 0px)';
+        const translateXY = 'translate(' + wrapper.scrollLeft + 'px, ' + wrapper.scrollTop + 'px)';
+
+        freezableElements.forEach(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;
+        });
+    };
+}
+
+/**
+ * Attaches a scroll handler to the container for freeze panes.
+ * @param {HTMLElement} container - The container element to attach the scroll handler to.
+ * @returns {HTMLElement[]} Array of freezable elements for later cleanup.
+ */
+function attachScrollHandler(container) {
+    const freezableElements = selectFreezableElements(container);
+    container.onscroll = createScrollHandler(freezableElements);
+    return freezableElements;
+}
+
+/**
+ * Initializes the transform strategy.
+ * @param {HTMLElement} container - The container element.
+ * @param {FreezePanesTableInfo} [_tableInfo] - Table information (unused in transform strategy).
+ * @returns {FreezePanesInitResult} Object with destroy function to clean up the scroll handler.
+ */
+function initialize(container, _tableInfo) {
+    const freezableElements = attachScrollHandler(container);
+
+    return {
+        destroy: function() {
+            container.onscroll = null;
+            freezableElements.forEach(function(element) {
+                element.style.transform = '';
+            });
+        }
+    };
+}
+
+module.exports = {
+    getClassStrings,
+    initialize,
+};

package/src/pivot.css

@@ -1,3 +1,5 @@
+@import './pivot-table/freeze-panes/freeze-panes.css';
+
 .pvtUi { color: #333; }
 
 .pivot-wrapper {
@@ -146,21 +148,6 @@ table.pvtTable .pvtAxisLabel {
     white-space: nowrap;
 }
 
-table.pvtTable .axis-freeze-pane {
-  position: relative;
-  z-index: 100;
-}
-
-table.pvtTable .vertical-freeze-pane {
-  position: relative;
-  z-index: 50;
-}
-
-table.pvtTable .horizontal-freeze-pane {
-  position: relative;
-  z-index: 50;
-}
-
 .pvtRowSubtotal {
     background-color: #EFEFEF !important;
     font-weight:bold;
@@ -283,89 +270,6 @@ table.pvtTable.newPvtTable tbody tr td {
   vertical-align: middle;
 }
 
-table.pvtTable thead tr th.axis-freeze-pane:before,
-table.pvtTable thead tr th.vertical-freeze-pane:before,
-table.pvtTable.newPvtTable thead tr th.axis-freeze-pane:before,
-table.pvtTable.newPvtTable thead tr th.vertical-freeze-pane:before {
-  content: '';
-  width: calc(100% + 1px);
-  height: 1px;
-  background: white;
-  position: absolute;
-  top: -1px;
-  left: 0;
-}
-
-table.pvtTable thead tr th.axis-freeze-pane:before,
-table.pvtTable thead tr th.vertical-freeze-pane:before {
-  background: #cdcdcd;
-}
-
-table.pvtTable thead tr th.axis-freeze-pane:after,
-table.pvtTable thead tr th.vertical-freeze-pane:after,
-table.pvtTable.newPvtTable thead tr th.axis-freeze-pane:after,
-table.pvtTable.newPvtTable thead tr th.vertical-freeze-pane:after {
-  content: '';
-  width: 1px;
-  height: 100%;
-  background: white;
-  position: absolute;
-  right: -1px;
-  top: 0;
-}
-table.pvtTable thead tr th.axis-freeze-pane:after,
-table.pvtTable thead tr th.vertical-freeze-pane:after {
-  background: #cdcdcd;
-}
-
-table.pvtTable tbody tr th.horizontal-freeze-pane:before,
-table.pvtTable tbody tr td.horizontal-freeze-pane:before,
-table.pvtTable.newPvtTable tbody tr th.horizontal-freeze-pane:before,
-table.pvtTable.newPvtTable tbody tr td.horizontal-freeze-pane:before {
-  content: '';
-  width: calc(100% + 1px);
-  height: 1px;
-  background: #dfe6ec;
-  position: absolute;
-  top: -1px;
-  left: 0;
-}
-table.pvtTable tbody tr th.horizontal-freeze-pane:before,
-table.pvtTable tbody tr td.horizontal-freeze-pane:before {
-  background: #cdcdcd;
-}
-table.pvtTable tbody tr th.colTotal.horizontal-freeze-pane:before,
-table.pvtTable tbody tr td.colTotal.horizontal-freeze-pane:before {
-  background: transparent;
-}
-
-table.pvtTable tbody tr th.horizontal-freeze-pane:after,
-table.pvtTable tbody tr td.horizontal-freeze-pane:after,
-table.pvtTable.newPvtTable tbody tr th.horizontal-freeze-pane:after,
-table.pvtTable.newPvtTable tbody tr td.horizontal-freeze-pane:after {
-  content: '';
-  width: 1px;
-  height: 100%;
-  background: #dfe6ec;
-  position: absolute;
-  right: -1px;
-  top: 0;
-}
-
-table.pvtTable tbody tr th.horizontal-freeze-pane:after,
-table.pvtTable tbody tr td.horizontal-freeze-pane:after {
-  background: #cdcdcd;
-}
-
-table.pvtTable.newPvtTable tbody tr th.horizontal-freeze-pane.colTotal:after {
-  background: #fff;
-}
-
-table.pvtTable.colorized:not(.newPvtTable) tbody tr th.horizontal-freeze-pane,
-table.pvtTable.newPvtTable.colorized tbody tr th.horizontal-freeze-pane:not(.highlighted):not(.colTotal) {
-  background-color: #fff !important;
-}
-
 table.pvtTable.newPvtTable tbody tr th {
   vertical-align: top;
   padding-top: 2.5px;

package/src/published_items_renderer.d.ts

@@ -0,0 +1,10 @@
+export = getPublishedItemsRenderer;
+declare function getPublishedItemsRenderer(publishedItemsRenderer: any): void;
+declare class getPublishedItemsRenderer {
+    constructor(publishedItemsRenderer: any);
+    document: {};
+    scope: {};
+    options: {};
+    isScenarioMode: any;
+    settings: {};
+}

package/src/seriesPointStyles-helper.d.ts

@@ -0,0 +1,2 @@
+export function setSeriesPointStylesOnClick(e: any): void;
+export function setInitialPointStyles(opts: any, series: any): void;

package/src/smart_queries_helper.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @param tree {DRPivotData['tree']}
+ * @param rowKey {string[]} ['6+6', 'Forecast 6+6 Mid'] OR ['6+6', 'SQ_Actuals']
+ * @param flatColKey {string} 'Jan-25'
+ * @returns {object|null} A aggregator object of SQ_Actuals or null if not found
+ */
+export function getSqAggregator(tree: DRPivotData["tree"], rowKey: string[], flatColKey: string): object | null;
+export function handleForecastSeries(chart_series: any, chartOptions: any, pivotData: any): any;
+export namespace DR_SCENARIO {
+    let SQ_Actuals: string;
+    let Forecast: string;
+}

package/src/value.formatter.d.ts

@@ -0,0 +1,3 @@
+export function getAggregatorPercentageValueIfRequired(value: any, render_options: any, data: any, rowKey: any, colKey: any): string | null;
+export function getRelatedValue(value: any, baseValue: any): number;
+export function isAbsoluteValue(formula: any): boolean;

package/tests/dr-renderer-helpers.test.js

@@ -196,4 +196,33 @@ describe('dr-renderer-helpers', () => {
             });
         });
     });
+
+    describe('isShowingEmptyValues', () => {
+        it('should return true when additionOptions is undefined', () => {
+            expect(drRendererHelpers.isShowingEmptyValues(undefined)).toBe(true);
+        });
+
+        it('should return true when additionOptions is null', () => {
+            expect(drRendererHelpers.isShowingEmptyValues(null)).toBe(true);
+        });
+
+        it('should return true when additionOptions.chart is undefined', () => {
+            expect(drRendererHelpers.isShowingEmptyValues({})).toBe(true);
+        });
+
+        it('should return true when dislay_empty_values is not false', () => {
+            expect(drRendererHelpers.isShowingEmptyValues({ chart: {} })).toBe(true);
+            expect(drRendererHelpers.isShowingEmptyValues({ chart: { dislay_empty_values: true } })).toBe(true);
+        });
+
+        it('should return false when dislay_empty_values is false', () => {
+            expect(drRendererHelpers.isShowingEmptyValues({ chart: { dislay_empty_values: false } })).toBe(false);
+        });
+    });
+
+    describe('DELIMER', () => {
+        it('should be " , "', () => {
+            expect(drRendererHelpers.DELIMER).toBe(' , ');
+        });
+    });
 });