logitude-dashboard-library 3.1.142 → 3.1.143

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,62 @@ $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;
+    }
+
     .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;
+    }
+
     .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 +1072,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,13 +1101,21 @@ $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;
     }
 
+    .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 {
         text-align: left;
         background-color: #ffffff;
@@ -1020,8 +1125,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 +1168,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

@@ -52,6 +52,7 @@ export declare const collectPivotRowPath: (startNode: any) => {
     field: string;
     key: any;
 }[];
+export declare const isAgGridPivotDrillDownMeasureColumn: (colDef: any, measures: PivotApiMeasure[]) => boolean;
 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[];

package/dist/index.js

@@ -2711,17 +2711,15 @@ var collectPivotRowPath = function collectPivotRowPath(startNode) {
     return path;
   }
 
-  if (startNode.footer) {
-    if (startNode.level === -1) {
-      return path;
-    }
+  if (startNode.footer && startNode.level === -1) {
+    return path;
+  }
 
-    if (startNode.field != null && startNode.key !== undefined) {
-      path.unshift({
-        field: startNode.field,
-        key: startNode.key
-      });
-    }
+  if (startNode.field != null && startNode.key !== undefined) {
+    path.unshift({
+      field: startNode.field,
+      key: startNode.key
+    });
   }
 
   var node = startNode.parent;
@@ -2739,6 +2737,29 @@ var collectPivotRowPath = function collectPivotRowPath(startNode) {
 
   return path;
 };
+var isAgGridPivotDrillDownMeasureColumn = function isAgGridPivotDrillDownMeasureColumn(colDef, measures) {
+  if (!colDef || !measures || measures.length === 0) {
+    return false;
+  }
+
+  if (colDef.pivotValueColumn) {
+    return true;
+  }
+
+  if (colDef.rowGroup || colDef.pivot) {
+    return false;
+  }
+
+  var colId = colDef.colId ? String(colDef.colId) : '';
+
+  if (colId.indexOf('ag-Grid-AutoColumn') === 0) {
+    return false;
+  }
+
+  return measures.some(function (measure) {
+    return measure.PivotMeasureCode === colDef.field || measure.PivotMeasureCode === colId;
+  });
+};
 var buildPivotDrillDownPivotFields = function buildPivotDrillDownPivotFields(colDef, startNode, apiFields) {
   var columnFields = apiFields.filter(function (field) {
     return !isRowPivotField(field);
@@ -3528,7 +3549,7 @@ var AgPivotGrid = React.forwardRef(function (props, _comRef) {
   }, []);
   var onCellClicked = React.useCallback(function (event) {
     var colDef = event.colDef;
-    if (!colDef || !colDef.pivotValueColumn) return;
+    if (!isAgGridPivotDrillDownMeasureColumn(colDef, pivotMeasuresRef.current)) return;
     if (isPivotMeasureValueEmpty(event.value)) return;
     var pivotFields = buildPivotDrillDownPivotFields(colDef, event.node, pivotFieldsRef.current);
     props.customChartProps.onSelectDataPoint({
@@ -3560,14 +3581,8 @@ var AgPivotGrid = React.forwardRef(function (props, _comRef) {
       wrapText: true,
       autoHeight: true,
       cellClass: 'dl-ag-pivot-row-label-cell',
-      headerValueGetter: function headerValueGetter(params) {
-        var colDef = params.colDef;
-        var showRowGroup = colDef && colDef.showRowGroup;
-        if (!showRowGroup) return '';
-        var field = pivotFieldsRef.current.find(function (f) {
-          return f.PivotCode === showRowGroup;
-        });
-        return field ? field.DisplayName : '';
+      headerValueGetter: function headerValueGetter() {
+        return '';
       },
       valueFormatter: function valueFormatter(params) {
         var colDef = params.colDef;
@@ -3641,6 +3656,21 @@ var AgPivotGrid = React.forwardRef(function (props, _comRef) {
     scheduleRowGrandTotalHeaderLabel();
   };
 
+  var getContextMenuItems = React.useCallback(function (params) {
+    var colId = params.column && params.column.getColId ? params.column.getColId() : '';
+    if (!colId || colId.indexOf('ag-Grid-AutoColumn') !== 0) return [];
+    return [{
+      name: 'Expand All',
+      action: function action() {
+        if (params.api) params.api.expandAll();
+      }
+    }, {
+      name: 'Collapse All',
+      action: function action() {
+        if (params.api) params.api.collapseAll();
+      }
+    }];
+  }, []);
   var gridWrapperClassName = 'ag-theme-balham pivot-grid-element dl-ag-pivot-grid';
   return React__default.createElement(React__default.Fragment, null, isLoading ? React__default.createElement("div", {
     className: 'dl-full-hight dl-flex-content-center spinner-custome'
@@ -3676,8 +3706,8 @@ var AgPivotGrid = React.forwardRef(function (props, _comRef) {
     onFirstDataRendered: onFirstDataRendered,
     onColumnPivotChanged: onColumnPivotChanged,
     onColumnResized: onColumnResized,
+    getContextMenuItems: getContextMenuItems,
     animateRows: false,
-    suppressContextMenu: true,
     suppressMovableColumns: true,
     headerHeight: 36,
     rowHeight: 36