@schneideress/dashboardframework 20.0.26 → 20.0.28

package/fesm2022/schneideress-dashboardframework.mjs

@@ -4980,8 +4980,291 @@ class RADashboardArea {
         setTimeout(() => {
             this.currentLoadingCount--;
         }, 100);
+        // For expanded view, override widget dimensions after data loads
+        const isExpandedView = new URLSearchParams(window.location.search).get('expanded') === 'true';
+        if (isExpandedView && widgetInfo && widgetInfo.widgetInstanceId) {
+            this.overrideWidgetDimensions(widgetInfo);
+        }
         // this.loadData()
     }
+    /**
+     * Override widget height and width for expanded view based on actual data content
+     * Reinitializes gridster after updating dimensions
+     */
+    overrideWidgetDimensions(widgetInfo) {
+        // Find the gridster item for this widget
+        const gridsterItem = this.widgetList.find((item) => item.widgetInfo && item.widgetInfo.widgetInstanceId === widgetInfo.widgetInstanceId);
+        if (gridsterItem && gridsterItem.widgetElement) {
+            // Wait for DOM to update after data load - use multiple attempts to catch async rendering
+            this.measureAndUpdateWidgetDimensions(gridsterItem, 0);
+        }
+    }
+    /**
+     * Measure widget content and update dimensions, with retry logic for async data loading
+     */
+    measureAndUpdateWidgetDimensions(gridsterItem, attempt = 0, maxAttempts = 8) {
+        setTimeout(() => {
+            // Get the actual rendered height of the widget content
+            const widgetElement = gridsterItem.widgetElement;
+            let element = null;
+            // widgetElement is the ElementRef from widgetLoaded event (wcWrapper.nativeElement)
+            if (widgetElement) {
+                if (widgetElement.nativeElement) {
+                    element = widgetElement.nativeElement;
+                }
+                else if (widgetElement instanceof HTMLElement) {
+                    element = widgetElement;
+                }
+            }
+            if (!element || this.gridcellHeight <= 0) {
+                if (attempt < maxAttempts) {
+                    this.measureAndUpdateWidgetDimensions(gridsterItem, attempt + 1, maxAttempts);
+                }
+                return;
+            }
+            // Find the table body or grid content that contains the actual data rows
+            const tbody = element.querySelector('tbody');
+            const table = element.querySelector('table');
+            const wcBody = element.querySelector('.wcBody');
+            const wc = element.querySelector('.wc');
+            const kendoGridContent = element.querySelector('.k-grid-content');
+            const kendoGridTable = element.querySelector('.k-grid-table');
+            // Measure the actual content height - try multiple strategies to get accurate measurement
+            let contentHeight = 0;
+            let measuredElement = null;
+            // Strategy 1: Measure table body (most accurate for row count)
+            if (tbody) {
+                measuredElement = tbody;
+                // Count actual rows and calculate height
+                const rows = tbody.querySelectorAll('tr');
+                if (rows.length > 0) {
+                    // Get height of first row to estimate
+                    const firstRow = rows[0];
+                    const rowHeight = firstRow.offsetHeight || 30; // Default row height if not available
+                    // Calculate total height based on row count
+                    const estimatedHeight = rows.length * rowHeight;
+                    // Use scrollHeight if available, otherwise use estimated
+                    contentHeight = Math.max(tbody.scrollHeight, estimatedHeight);
+                }
+                else {
+                    contentHeight = tbody.scrollHeight;
+                }
+            }
+            // Strategy 2: Measure Kendo grid content
+            else if (kendoGridContent) {
+                measuredElement = kendoGridContent;
+                contentHeight = kendoGridContent.scrollHeight;
+                // Also check the table inside
+                if (kendoGridTable) {
+                    const tableHeight = kendoGridTable.scrollHeight;
+                    contentHeight = Math.max(contentHeight, tableHeight);
+                }
+            }
+            // Strategy 3: Measure table
+            else if (table) {
+                measuredElement = table;
+                contentHeight = table.scrollHeight;
+            }
+            // Strategy 4: Measure widget content
+            else if (wc) {
+                measuredElement = wc;
+                contentHeight = wc.scrollHeight;
+            }
+            // Strategy 5: Measure widget body
+            else if (wcBody) {
+                measuredElement = wcBody;
+                contentHeight = wcBody.scrollHeight;
+            }
+            // Fallback: measure the wrapper
+            else {
+                measuredElement = element;
+                contentHeight = element.scrollHeight;
+            }
+            // If scrollHeight seems constrained, try alternative measurements
+            if (measuredElement) {
+                // Check if scrollHeight is accurate (should be > clientHeight if content overflows)
+                const scrollH = measuredElement.scrollHeight;
+                const clientH = measuredElement.clientHeight;
+                const offsetH = measuredElement.offsetHeight;
+                // If scrollHeight equals clientHeight and seems too small, content might be constrained
+                if (scrollH === clientH && scrollH < 200) {
+                    // Try offsetHeight
+                    contentHeight = Math.max(contentHeight, offsetH);
+                }
+                // For tables, also try measuring all rows directly
+                if (tbody || table) {
+                    const allRows = (tbody || table)?.querySelectorAll('tr') || [];
+                    if (allRows.length > 0) {
+                        let totalRowHeight = 0;
+                        allRows.forEach((row) => {
+                            totalRowHeight += row.offsetHeight || 30;
+                        });
+                        // Use the maximum of scrollHeight and calculated row heights
+                        contentHeight = Math.max(contentHeight, totalRowHeight);
+                    }
+                }
+            }
+            // Get header height
+            const header = element.querySelector('.wcheader');
+            const headerHeight = header ? header.offsetHeight : 46;
+            // Calculate total height needed (content + header + padding)
+            // Add sufficient padding to ensure no scrolling
+            const padding = 40; // Padding for margins and spacing
+            const totalHeight = contentHeight + headerHeight + padding;
+            // Check if content is loaded (reasonable height)
+            // For expanded view, we expect significant content
+            const hasValidContent = contentHeight > 100 || (attempt >= 3 && contentHeight > 50);
+            if (!hasValidContent && attempt < maxAttempts) {
+                // Content not fully loaded, retry with longer delay
+                this.measureAndUpdateWidgetDimensions(gridsterItem, attempt + 1, maxAttempts);
+                return;
+            }
+            // Calculate rows needed based on grid cell height
+            // Use Math.ceil to ensure we have enough space (round up)
+            const calculatedRows = Math.ceil(totalHeight / this.gridcellHeight);
+            // Add a small buffer (0.5 rows) to ensure no scrolling, then round up
+            // This accounts for any rounding errors or minor spacing issues
+            const bufferedRows = calculatedRows + 0.5;
+            const newRows = Math.max(Math.ceil(bufferedRows), 4);
+            // For expanded view, use full available width (no spacing needed since widgets stack vertically)
+            const maxCols = this.responsiveService.maxColsDesktop || 12;
+            const newCols = maxCols; // Full width
+            // Update gridster item dimensions if changed
+            const needsUpdate = gridsterItem.rows !== newRows || gridsterItem.cols !== newCols || gridsterItem.x !== 0;
+            if (needsUpdate) {
+                gridsterItem.rows = newRows;
+                gridsterItem.cols = newCols;
+                gridsterItem.x = 0; // Always start at the beginning of the row (full width)
+                // Update widget info
+                if (gridsterItem.widgetInfo) {
+                    gridsterItem.widgetInfo.height = newRows;
+                    gridsterItem.widgetInfo.width = newCols;
+                    gridsterItem.widgetInfo.position_x = 0; // Start at position 0 for full width
+                }
+                // Reposition widgets to prevent overlapping after dimension change
+                this.repositionWidgetsAfterDimensionChange();
+                // Force gridster to recalculate layout
+                this.ngZone.run(() => {
+                    // Trigger change detection by updating the array reference
+                    this.widgetList = [...this.widgetList];
+                    // Call optionsChanged if API is available
+                    if (this.options && this.options.api) {
+                        this.options.api?.optionsChanged();
+                    }
+                    // Update area height after dimensions change
+                    setTimeout(() => {
+                        this.setAreaHeight();
+                        // Re-verify height after layout update to ensure accuracy
+                        // Check if there's still scrolling and adjust if needed
+                        if (attempt < maxAttempts - 1) {
+                            setTimeout(() => {
+                                // Re-measure to verify the height is correct
+                                const widgetEl = gridsterItem.widgetElement;
+                                let el = null;
+                                if (widgetEl) {
+                                    el = widgetEl.nativeElement || widgetEl;
+                                }
+                                if (el) {
+                                    const wcBody = el.querySelector('.wcBody');
+                                    const tbody = el.querySelector('tbody');
+                                    const contentEl = tbody || wcBody || el;
+                                    // Check if there's scrolling (scrollHeight > clientHeight)
+                                    if (contentEl && contentEl.scrollHeight > contentEl.clientHeight + 10) {
+                                        // Still has scrolling, need more height
+                                        const additionalHeight = contentEl.scrollHeight - contentEl.clientHeight;
+                                        const additionalRows = Math.ceil(additionalHeight / this.gridcellHeight);
+                                        if (additionalRows > 0) {
+                                            gridsterItem.rows = gridsterItem.rows + additionalRows;
+                                            if (gridsterItem.widgetInfo) {
+                                                gridsterItem.widgetInfo.height = gridsterItem.rows;
+                                            }
+                                            this.widgetList = [...this.widgetList];
+                                            if (this.options && this.options.api) {
+                                                this.options.api?.optionsChanged();
+                                            }
+                                            setTimeout(() => this.setAreaHeight(), 100);
+                                        }
+                                    }
+                                }
+                                // Continue with normal retry logic
+                                this.measureAndUpdateWidgetDimensions(gridsterItem, attempt + 1, maxAttempts);
+                            }, 400);
+                        }
+                    }, 200);
+                });
+            }
+            else if (attempt < maxAttempts - 1) {
+                // Dimensions didn't change, but verify one more time that content is fully loaded
+                this.measureAndUpdateWidgetDimensions(gridsterItem, attempt + 1, maxAttempts);
+            }
+        }, attempt === 0 ? 1500 : attempt < 3 ? 800 : 500); // Longer initial wait for data to fully render
+    }
+    /**
+     * Reposition widgets to prevent overlapping after dimension changes in expanded view
+     * When 2 widgets are in the same row, the 2nd widget moves to next row after the 1st widget's height
+     */
+    repositionWidgetsAfterDimensionChange() {
+        if (this.widgetList.length === 0)
+            return;
+        // Sort widgets by their original Y position (row), then by X position (left to right)
+        const sortedWidgets = [...this.widgetList].sort((a, b) => {
+            const aY = a.y || 0;
+            const bY = b.y || 0;
+            if (aY !== bY) {
+                return aY - bY;
+            }
+            // If same row, sort by X position (left to right)
+            return (a.x || 0) - (b.x || 0);
+        });
+        // Group widgets by their original row (Y position) before repositioning
+        const rowGroups = new Map();
+        sortedWidgets.forEach(widget => {
+            const originalY = widget.y || 0;
+            if (!rowGroups.has(originalY)) {
+                rowGroups.set(originalY, []);
+            }
+            rowGroups.get(originalY).push(widget);
+        });
+        // Sort rows by Y position
+        const sortedRows = Array.from(rowGroups.entries()).sort((a, b) => a[0] - b[0]);
+        let currentY = 0;
+        // Process each original row
+        sortedRows.forEach(([originalRowY, widgetsInRow]) => {
+            // Sort widgets in this row by X position (left to right)
+            widgetsInRow.sort((a, b) => (a.x || 0) - (b.x || 0));
+            // Process widgets sequentially: first widget at currentY, subsequent widgets after previous widget's height
+            // All widgets get x=0 since they take full width and stack vertically
+            widgetsInRow.forEach((widget, index) => {
+                if (index === 0) {
+                    // First widget in row: place at currentY
+                    widget.y = currentY;
+                }
+                else {
+                    // Subsequent widgets: place after the previous widget's bottom edge
+                    const previousWidget = widgetsInRow[index - 1];
+                    const previousWidgetHeight = previousWidget.rows || 0;
+                    const previousWidgetY = previousWidget.y || 0;
+                    widget.y = previousWidgetY + previousWidgetHeight;
+                }
+                // Set x to 0 for all widgets (full width, no horizontal spacing)
+                widget.x = 0;
+                // Update widget info
+                if (widget.widgetInfo) {
+                    widget.widgetInfo.position_y = widget.y;
+                    widget.widgetInfo.position_x = 0; // Full width, start at position 0
+                }
+            });
+            // Calculate where the next row should start
+            // If multiple widgets in row, use the last widget's bottom edge
+            // Otherwise, use the first widget's bottom edge
+            if (widgetsInRow.length > 0) {
+                const lastWidget = widgetsInRow[widgetsInRow.length - 1];
+                const lastWidgetY = lastWidget.y || 0;
+                const lastWidgetHeight = lastWidget.rows || 0;
+                currentY = lastWidgetY + lastWidgetHeight;
+            }
+        });
+    }
     isElementLoaded(el) {
         if (el) {
             let rect = el.getBoundingClientRect();
@@ -5122,6 +5405,8 @@ class RADashboardArea {
         };
         let _the = this;
         this.isSiteDetailDashboard = this.dashboardInfo?.templateName === 'Site Detail';
+        // Check if expanded view is requested
+        //const isExpandedView = new URLSearchParams(window.location.search).get('expanded') === 'true';
         this.dashboardService.getWidgetsByDashboardArea(widgetInfo, this.appConfig).subscribe(widgets => {
             if (this.isSiteDetailDashboard) {
                 widgets = this.arrangeWidgetsInTwoColumnGrid(widgets);