logitude-dashboard-library 3.2.65 → 3.2.67

package/dist/assets/styles/dl-dashboard.scss

@@ -926,23 +926,71 @@ $dark-grey: #717585;
         font-family: "Manrope", sans-serif;
     }
 
+    /* Match DevExtreme pivot typography / colors (custom DX overrides above). */
+    .dl-ag-pivot-grid.ag-theme-balham {
+        font-family: "Manrope", sans-serif;
+        font-size: 12px;
+        color: #46494A;
+        --ag-font-family: "Manrope", sans-serif;
+        --ag-font-size: 12px;
+        --ag-foreground-color: #46494A;
+        --ag-secondary-foreground-color: #46494A;
+        --ag-disabled-foreground-color: #46494A;
+        --ag-header-foreground-color: #222222;
+        --ag-header-background-color: #ffffff;
+        --ag-background-color: #ffffff;
+        --ag-odd-row-background-color: #ffffff;
+        --ag-selected-row-background-color: rgba(221, 221, 221, 0.35);
+        --ag-row-hover-color: rgba(221, 221, 221, 0.15);
+        --ag-border-color: #DFE1E3;
+        --ag-row-border-color: #DFE1E3;
+        --ag-header-column-separator-color: #DFE1E3;
+        --ag-header-column-resize-handle-color: #DFE1E3;
+    }
+
     .dl-ag-pivot-grid .ag-root-wrapper {
-        border: 1px solid #e0e0e0;
+        border: 1px solid #DFE1E3;
+        font-family: "Manrope", sans-serif;
     }
 
     .dl-ag-pivot-grid {
-        --ag-border-color: #e0e0e0;
-        --ag-row-border-color: #e0e0e0;
+        --ag-border-color: #DFE1E3;
+        --ag-row-border-color: #DFE1E3;
+        --ag-header-column-separator-color: #DFE1E3;
+        --ag-header-column-resize-handle-color: #DFE1E3;
         --ag-header-background-color: #ffffff;
     }
 
+    /* Force every Ag Grid structural border to the same color. */
+    .dl-ag-pivot-grid.ag-theme-balham .ag-root-wrapper,
+    .dl-ag-pivot-grid.ag-theme-balham .ag-root,
+    .dl-ag-pivot-grid.ag-theme-balham .ag-header,
+    .dl-ag-pivot-grid.ag-theme-balham .ag-header-row,
+    .dl-ag-pivot-grid.ag-theme-balham .ag-header-cell,
+    .dl-ag-pivot-grid.ag-theme-balham .ag-header-group-cell,
+    .dl-ag-pivot-grid.ag-theme-balham .ag-pinned-left-header,
+    .dl-ag-pivot-grid.ag-theme-balham .ag-pinned-right-header,
+    .dl-ag-pivot-grid.ag-theme-balham .ag-row,
+    .dl-ag-pivot-grid.ag-theme-balham .ag-cell,
+    .dl-ag-pivot-grid.ag-theme-balham .ag-body-viewport,
+    .dl-ag-pivot-grid.ag-theme-balham .ag-center-cols-viewport,
+    .dl-ag-pivot-grid.ag-theme-balham .ag-center-cols-container,
+    .dl-ag-pivot-grid.ag-theme-balham .ag-floating-top,
+    .dl-ag-pivot-grid.ag-theme-balham .ag-floating-bottom,
+    .dl-ag-pivot-grid.ag-theme-balham .ag-side-bar,
+    .dl-ag-pivot-grid.ag-theme-balham .ag-status-bar {
+        border-color: #DFE1E3 !important;
+    }
+
     .dl-ag-pivot-grid.ag-theme-balham .ag-header {
         background-color: #ffffff !important;
+        font-family: "Manrope", sans-serif;
+        color: #222222;
     }
 
     .dl-ag-pivot-grid.ag-theme-balham .ag-header-cell,
     .dl-ag-pivot-grid.ag-theme-balham .ag-header-group-cell {
-        font-family: "Manrope";
+        font-family: "Manrope", sans-serif;
         font-size: 12px;
         font-weight: 600;
         text-align: center;
@@ -950,29 +998,88 @@ $dark-grey: #717585;
         background-color: #ffffff !important;
     }
 
+    /* Balham defaults height:50% / inset top — force full-height separators. */
+    .dl-ag-pivot-grid.ag-theme-balham .ag-header-cell::after,
+    .dl-ag-pivot-grid.ag-theme-balham .ag-header-group-cell::after {
+        height: 100%;
+        top: 0;
+        background-color: #DFE1E3;
+    }
+
+    .dl-ag-pivot-grid.ag-theme-balham .ag-header-cell-text,
+    .dl-ag-pivot-grid.ag-theme-balham .ag-header-group-text,
+    .dl-ag-pivot-grid.ag-theme-balham .ag-header-cell-label,
+    .dl-ag-pivot-grid.ag-theme-balham .ag-header-group-cell-label {
+        font-family: "Manrope", sans-serif;
+        font-size: 12px;
+        font-weight: 600;
+        color: #222222 !important;
+    }
+
+    /*
+     * Header wrap only (Ag Grid 27 / pre-v28). Leaf headers also get white-space via
+     * headerComponentParams.template; group headers have no wrapHeaderText until v32.1.
+     * Do not touch body .ag-cell here.
+     */
+    .dl-ag-pivot-grid .ag-header-cell-text,
+    .dl-ag-pivot-grid .ag-header-group-text {
+        white-space: normal !important;
+        overflow: visible !important;
+        text-overflow: clip !important;
+        line-height: 1.25;
+    }
+
     .dl-ag-pivot-grid .ag-header-cell[col-id^="ag-Grid-AutoColumn"] {
         text-align: left;
     }
 
+    .dl-ag-pivot-grid .ag-header-cell[col-id^="ag-Grid-AutoColumn"] .ag-header-cell-text,
+    .dl-ag-pivot-grid .ag-header-cell[col-id^="ag-Grid-AutoColumn"] .ag-header-cell-label {
+        text-align: left;
+    }
+
+    /* Column grand totals — match DevExtreme .dx-grandtotal */
     .dl-ag-pivot-grid .ag-header-cell[col-id^="PivotRowTotal_"],
     .dl-ag-pivot-grid .ag-header-group-cell.dl-pivot-row-grand-total-group-header,
     .dl-ag-pivot-grid .ag-header-group-cell.dl-pivot-row-grand-total-group-header-sibling {
         background-color: #f5f5f5 !important;
     }
 
+    .dl-ag-pivot-grid .ag-cell[col-id^="PivotRowTotal_"] {
+        background-color: #f5f5f5 !important;
+    }
+
+    /* Column group totals (e.g. "Dtest Total") — match DX .dx-total / row-footer totals */
+    .dl-ag-pivot-grid.ag-theme-balham .ag-header-cell.dl-pivot-column-group-total-header,
+    .dl-ag-pivot-grid.ag-theme-balham .ag-header-group-cell.dl-pivot-column-group-total-header,
+    .dl-ag-pivot-grid .ag-header-cell.dl-pivot-column-group-total-header,
+    .dl-ag-pivot-grid .ag-header-group-cell.dl-pivot-column-group-total-header {
+        background-color: #dddddd33 !important;
+    }
+
+    .dl-ag-pivot-grid .ag-cell.dl-pivot-column-group-total-cell,
+    .dl-ag-pivot-grid .dl-pivot-column-group-total-cell {
+        background-color: #dddddd33 !important;
+    }
+
     .dl-ag-pivot-grid.ag-theme-balham .ag-cell {
         border: none !important;
-        border-right: 1px solid #e0e0e0 !important;
+        border-right: 1px solid #DFE1E3 !important;
     }
 
     .dl-ag-pivot-grid.ag-theme-balham .ag-row {
-        border-bottom: 1px solid #e0e0e0 !important;
+        border-bottom: 1px solid #DFE1E3 !important;
+        background-color: #ffffff;
     }
 
     .dl-ag-pivot-grid .dl-ag-pivot-data-cell,
     .dl-ag-pivot-grid .ag-cell.dl-ag-pivot-data-cell {
         text-align: right !important;
         cursor: pointer;
+        font-family: "Manrope", sans-serif;
+        font-size: 12px;
+        font-weight: 500;
+        color: #46494A;
     }
 
     .dl-ag-pivot-grid .dl-pivot-date-data-cell,
@@ -991,11 +1098,27 @@ $dark-grey: #717585;
         text-align: left !important;
         justify-content: flex-start;
         background-color: #ffffff;
+        font-family: "Manrope", sans-serif;
+        font-size: 12px;
+        font-weight: 500;
+        color: #46494A;
+    }
+
+    /* Parent row headers — match DevExtreme vertical-headers td div>span (weight 600) */
+    .dl-ag-pivot-grid .ag-row-group.ag-row-group-expanded .dl-ag-pivot-row-label-cell,
+    .dl-ag-pivot-grid .ag-row-group.ag-row-group-contracted .dl-ag-pivot-row-label-cell,
+    .dl-ag-pivot-grid .ag-row-group.ag-row-group-expanded .ag-cell.dl-ag-pivot-row-label-cell,
+    .dl-ag-pivot-grid .ag-row-group.ag-row-group-contracted .ag-cell.dl-ag-pivot-row-label-cell {
+        font-weight: 600 !important;
+        color: #46494A !important;
     }
 
     .dl-ag-pivot-grid .ag-row-footer .ag-cell,
     .dl-ag-pivot-grid .ag-row-group-footer .ag-cell {
+        font-family: "Manrope", sans-serif;
+        font-size: 12px;
         font-weight: 500;
+        color: #46494A;
     }
 
     .dl-ag-pivot-grid .ag-row-footer .dl-ag-pivot-row-label-cell,
@@ -1004,11 +1127,24 @@ $dark-grey: #717585;
     }
 
     .dl-ag-pivot-grid .ag-cell {
-        font-family: "Manrope";
+        font-family: "Manrope", sans-serif;
         font-size: 12px;
         font-weight: 500;
         color: #46494A;
-        padding: 6px 8px 5px 8px;
+        /*
+         * Ag Grid autoHeight = wrapperHeight + paddingTop + paddingBottom (CellCtrl.setupAutoHeight).
+         * Balham cell line-height is 26px; with old padding 6+5 the row measured ~37px and beat rowHeight 30.
+         * Vertical padding 2+2 => 26+4 = 30 for single-line cells; wrapped content can still grow.
+         */
+        padding: 2px 8px 2px 8px;
+    }
+
+    .dl-ag-pivot-grid .ag-cell-value,
+    .dl-ag-pivot-grid .ag-group-value,
+    .dl-ag-pivot-grid .ag-group-child-count {
+        font-family: "Manrope", sans-serif;
+        font-size: 12px;
+        color: #46494A;
     }
 
     .dl-ag-pivot-grid .ag-row-group .ag-cell {
@@ -1020,8 +1156,38 @@ $dark-grey: #717585;
         text-align: left;
     }
 
+    /*
+     * Ag Grid paints cell backgrounds, not the row. Footer row bg alone is invisible.
+     * Match DevExtreme totals across the full total row (row label + measure cells).
+     */
     .dl-ag-pivot-grid .ag-row-footer,
     .dl-ag-pivot-grid .ag-row-group-footer {
+        background-color: #dddddd33 !important;
+    }
+
+    .dl-ag-pivot-grid .ag-row-footer .ag-cell,
+    .dl-ag-pivot-grid .ag-row-group-footer .ag-cell,
+    .dl-ag-pivot-grid .ag-row-footer .dl-ag-pivot-row-label-cell,
+    .dl-ag-pivot-grid .ag-row-group-footer .dl-ag-pivot-row-label-cell,
+    .dl-ag-pivot-grid .ag-row-footer .dl-ag-pivot-data-cell,
+    .dl-ag-pivot-grid .ag-row-group-footer .dl-ag-pivot-data-cell,
+    .dl-ag-pivot-grid .ag-row-footer .ag-cell.dl-ag-pivot-row-label-cell,
+    .dl-ag-pivot-grid .ag-row-group-footer .ag-cell.dl-ag-pivot-row-label-cell,
+    .dl-ag-pivot-grid .ag-row-footer .ag-cell.dl-ag-pivot-data-cell,
+    .dl-ag-pivot-grid .ag-row-group-footer .ag-cell.dl-ag-pivot-data-cell {
+        background-color: #dddddd33 !important;
+    }
+
+    /* Grand Total row */
+    .dl-ag-pivot-grid .ag-row-footer.ag-row-level--1 {
+        background-color: #f5f5f5 !important;
+    }
+
+    .dl-ag-pivot-grid .ag-row-footer.ag-row-level--1 .ag-cell,
+    .dl-ag-pivot-grid .ag-row-footer.ag-row-level--1 .dl-ag-pivot-row-label-cell,
+    .dl-ag-pivot-grid .ag-row-footer.ag-row-level--1 .dl-ag-pivot-data-cell,
+    .dl-ag-pivot-grid .ag-row-footer.ag-row-level--1 .ag-cell.dl-ag-pivot-row-label-cell,
+    .dl-ag-pivot-grid .ag-row-footer.ag-row-level--1 .ag-cell.dl-ag-pivot-data-cell {
         background-color: #f5f5f5 !important;
     }
 
@@ -1033,6 +1199,10 @@ $dark-grey: #717585;
         visibility: hidden;
     }
 
+    .dl-ag-pivot-grid .ag-icon {
+        color: #46494A;
+    }
+
     .dx-scrollbar-hoverable .dx-scrollable-scroll.dx-state-invisible .dx-scrollable-scroll-content {
         background-color: rgba(191, 191, 191, .7);
     }

package/dist/features/Dashboard/ChartsComponents/CustomCharts/PivotAgGridSupport.d.ts

@@ -42,6 +42,25 @@ export declare const getPivotDisplayName: (pivotData: any[], fieldName: string,
 export declare const isPivotRowGrandTotalColumnDef: (colDef: any) => boolean;
 export declare const isPivotRowGrandTotalGroupDef: (colGroupDef: any) => boolean;
 export declare const resolvePivotGroupHeaderName: (colGroupDef: any, columnFields: PivotApiField[], lookupDisplayName: (field: PivotApiField, rawValue: any) => string) => string | null;
+/**
+ * Ag Grid expandable pivot totals: leaf with pivotTotalColumnIds + columnGroupShow 'closed'.
+ * (Created by addExpandablePivotGroups — one column per measure.)
+ */
+export declare const isAgGridExpandablePivotColumnTotalLeaf: (colDef: any) => boolean;
+/** After DX promote: per-measure column-group total leaf (still has pivotTotalColumnIds). */
+export declare const isAgGridPivotColumnGroupTotalColumn: (colDef: any) => boolean;
+export declare const setAllAgGridColumnGroupsOpened: (columnApi: any, opened: boolean) => void;
+/**
+ * Choice 2 (DX parity) on top of Ag Grid expandable pivot totals:
+ * - Keeps native per-measure total leaves (same colIds → aggregation unchanged).
+ * - Clears columnGroupShow so totals stay visible when expanded AND collapsed
+ *   (Ag Grid docs: undefined/null = always shown; open+always-shown still expandable).
+ * - Wraps them in a "{Value} Total" group for DX header layout.
+ *
+ * Requires: pivotColumnGroupTotals OFF (otherwise addExpandablePivotGroups is skipped)
+ * and suppressExpandablePivotGroups OFF when column totals are enabled.
+ */
+export declare const promoteExpandablePivotColumnTotalsForDx: (colGroupDef: any, columnFields: PivotApiField[], lookupDisplayName: (field: PivotApiField, rawValue: any) => string) => void;
 export declare const getPivotValueColumnId: (pivotValueColumn: any) => string | null;
 export declare const resolveMeasureFromPivotValueColumn: (colDef: any, measures: PivotApiMeasure[]) => PivotApiMeasure | undefined;
 export declare const resolvePivotLeafHeaderName: (colDef: any, columnFields: PivotApiField[], lookupDisplayName: (field: PivotApiField, rawValue: any) => string, measureCount: number, measures: PivotApiMeasure[]) => string | null;
@@ -52,6 +71,14 @@ export declare const collectPivotRowPath: (startNode: any) => {
     field: string;
     key: any;
 }[];
+export declare const isAgGridPivotDrillDownMeasureColumn: (colDef: any, measures: PivotApiMeasure[]) => boolean;
+/**
+ * Map Ag Grid blank dimension keys to what DrillDownDataProvider expects for IS NULL.
+ * - Row groups in pivot mode: null/undefined → single space ' ' (GroupStage).
+ * - Pivot column buckets: missing → '' (PivotStage.bucketChildren).
+ * Backend: string.IsNullOrEmpty(value) → `{field} IS NULL`.
+ */
+export declare const normalizePivotDrillDownFieldValue: (value: any) => string | null;
 export declare const buildPivotDrillDownPivotFields: (colDef: any, startNode: any, apiFields: PivotApiField[]) => any[];
 export declare const getMeasureCaption: (measure: PivotApiMeasure) => string;
 export declare const parseJsonArray: (json: string | null | undefined) => any[];