@adaptabletools/adaptable 18.0.0-canary.11 → 18.0.0-canary.12

package/src/Utilities/Services/ReportService.js

@@ -7,6 +7,8 @@ import StringExtensions from '../Extensions/StringExtensions';
 import { ExportModuleId } from '../Constants/ModuleConstants';
 import { createUuid } from '../../components/utils/uuid';
 import { createBaseContext } from '../ObjectFactory';
+import { convertCSSAbsoluteFontSizeToPt, getVariableColor, sanitizeStyle, } from '../Helpers/StyleHelper';
+import tinycolor from 'tinycolor2';
 export class ReportService {
     constructor(adaptableApi) {
         this.adaptableApi = adaptableApi;
@@ -15,29 +17,12 @@ export class ReportService {
         this.excelStylesWithFormattedDate = {};
         this.adaptableApi = adaptableApi;
     }
-    resetExcelStyleMemoization() {
-        this.excelStylesCache = {};
-        this.cellClassKey2excelStyleIdMap = {};
-        this.excelStylesWithFormattedDate = {};
-    }
-    registerExcelStyle(excelStyle, cellClassKey) {
-        const excelStyleKey = JSON.stringify(excelStyle);
-        if (!this.excelStylesCache[excelStyleKey]) {
-            const excelStyleId = createUuid();
-            const excelStyleWithId = Object.assign(Object.assign({}, excelStyle), { id: excelStyleId });
-            this.excelStylesCache[excelStyleKey] = excelStyleWithId;
-        }
-        this.cellClassKey2excelStyleIdMap[cellClassKey] = this.excelStylesCache[excelStyleKey].id;
-    }
-    getRegisteredExcelStyles() {
-        return Object.values(this.excelStylesCache);
+    destroy() {
+        // TO DO
     }
     getExcelStyleIdForCellClassKey(cellClassKey) {
         return this.cellClassKey2excelStyleIdMap[cellClassKey];
     }
-    registerExcelStyleWithFormattedDate(cellClassId, isoFormattedValue) {
-        this.excelStylesWithFormattedDate[cellClassId] = isoFormattedValue;
-    }
     getExcelStyleWithFormattedDate(cellClassId) {
         return this.excelStylesWithFormattedDate[cellClassId];
     }
@@ -365,9 +350,6 @@ export class ReportService {
         }
         return fileName;
     }
-    destroy() {
-        // TO DO
-    }
     getCustomExportDateFormat() {
         return this.adaptableApi.optionsApi.getExportOptions().exportDateFormat;
     }
@@ -379,4 +361,238 @@ export class ReportService {
             : // type === formattedValue
                 this.adaptableApi.gridApi.getDisplayValueFromRawValue(rowNode, columnId, cellRawValue);
     }
+    // aggregate and merge all acive Adaptable styles with the user proviided ExcelStyles
+    buildExcelStylesForVisualReports() {
+        // for historical reasons, the styles are merged as class variables
+        // we could/should refactor this to be more functional
+        this.createExcelStyleMemoization();
+        return Object.values(this.excelStylesCache);
+    }
+    createExcelStyleMemoization() {
+        this.resetExcelStyleMemoization();
+        // we memoize as much as possible, as this is called quite A LOT
+        const adaptableColumnMap = {};
+        const getAdaptableColumnWithColumnId = (columnId) => {
+            const memoizedColumn = adaptableColumnMap[columnId];
+            if (memoizedColumn) {
+                return memoizedColumn;
+            }
+            const abColumn = this.adaptableApi.columnApi.getColumnWithColumnId(columnId);
+            adaptableColumnMap[columnId] = abColumn;
+            return abColumn;
+        };
+        const formatColumnsWithDisplayFormatForColumn = {};
+        const getFormatColumnsWithDisplayFormatForColumn = (columnId) => {
+            const memoizedFormatColumns = formatColumnsWithDisplayFormatForColumn[columnId];
+            if (memoizedFormatColumns) {
+                return memoizedFormatColumns;
+            }
+            const abColumn = getAdaptableColumnWithColumnId(columnId);
+            const formatColumns = this.adaptableApi.formatColumnApi.internalApi.getFormatColumnsWithDisplayFormatForColumn(abColumn);
+            formatColumnsWithDisplayFormatForColumn[columnId] = formatColumns;
+            return formatColumns;
+        };
+        const isDateCellExportedAsFormattedValue = this.adaptableApi.exportApi.internalApi.isDateCellExportedAsFormattedValue();
+        const displayedColumns = this.adaptableApi.agGridApi.getAllDisplayedColumns();
+        const colDefs = displayedColumns.map((column) => {
+            return column.getColDef();
+        });
+        const forAllVisibleRowNodesDoConfig = { includeGroupRows: true };
+        const agGridApi = this.adaptableApi.agGridApi;
+        const userExcelStyles = this.adaptableApi.internalApi
+            .getAdaptableInstance()
+            .agGridAdapter.getUserGridOptionsProperty('excelStyles') || [];
+        this.adaptableApi.internalApi.forAllVisibleRowNodesDo((node, rowIndex) => {
+            var _a;
+            const rowParams = {
+                node,
+                data: node.data,
+                rowIndex,
+                api: agGridApi,
+                columnApi: null,
+                context: ((_a = agGridApi.__getContext) === null || _a === void 0 ? void 0 : _a.call(agGridApi)) || {},
+            };
+            const getRowStyleFn = agGridApi.getGridOption('getRowStyle');
+            const rowStyle = getRowStyleFn ? getRowStyleFn(rowParams) : {};
+            displayedColumns.forEach((column, columnIndex) => {
+                var _a, _b, _c;
+                const colDef = colDefs[columnIndex];
+                let cellClassParams;
+                const getLazyCellClassParams = () => {
+                    if (!cellClassParams) {
+                        cellClassParams = {
+                            colDef,
+                            node,
+                            column,
+                            data: node.data,
+                            value: this.adaptableApi.gridApi.getRawValueFromRowNode(node, column.getId()),
+                            rowIndex,
+                            api: agGridApi,
+                            columnApi: null,
+                            context: {},
+                        };
+                    }
+                    return cellClassParams;
+                };
+                const cellStyle = typeof colDef.cellStyle === 'function' ? colDef.cellStyle(getLazyCellClassParams()) : {};
+                const excelStyles = [];
+                // add user defined excel styles
+                let userColDefCellClass = this.adaptableApi.internalApi
+                    .getAdaptableInstance()
+                    .agGridColumnAdapter.getUserColDefProperty(column.getColId(), 'cellClass');
+                const userDefinedCellClass = typeof userColDefCellClass === 'function'
+                    ? userColDefCellClass(getLazyCellClassParams())
+                    : userColDefCellClass;
+                const userDefinedExcelStyle = userDefinedCellClass &&
+                    userExcelStyles.find((excelStyle) => {
+                        var _a;
+                        return typeof userDefinedCellClass === 'string'
+                            ? userDefinedCellClass === excelStyle.id
+                            : (_a = userDefinedCellClass === null || userDefinedCellClass === void 0 ? void 0 : userDefinedCellClass.includes) === null || _a === void 0 ? void 0 : _a.call(userDefinedCellClass, excelStyle.id);
+                    });
+                if (userDefinedExcelStyle) {
+                    excelStyles.push(userDefinedExcelStyle);
+                }
+                // add adaptable derived styles (format column etc.)
+                const adaptableStyle = Object.assign(Object.assign({}, rowStyle), Object.keys(cellStyle).reduce((result, key) => {
+                    if (cellStyle[key] !== null) {
+                        result[key] = cellStyle[key];
+                    }
+                    return result;
+                }, {}));
+                const sanitizedAdaptableStyle = sanitizeStyle(adaptableStyle);
+                if (Object.values(sanitizedAdaptableStyle).some((style) => style != null)) {
+                    excelStyles.push(this.convertCSSToExcelStyle(sanitizedAdaptableStyle));
+                }
+                const excelDataType = this.adaptableApi.exportApi.internalApi.getExcelDataType(colDef === null || colDef === void 0 ? void 0 : colDef.type);
+                const rawValue = this.adaptableApi.gridApi.getRawValueFromRowNode(node, column.getId());
+                // don't add the cell style if it has no adaptable custom styles
+                if (!excelStyles.length &&
+                    // if this is a formatted Date value, we still need to add the AG GRID specific type & numberFormat below
+                    !(excelDataType === 'DateTime' && isDateCellExportedAsFormattedValue)) {
+                    return;
+                }
+                const cellClassId = this.adaptableApi.internalApi
+                    .getAdaptableInstance()
+                    .agGridColumnAdapter.getExcelClassNameForCell(column.getId(), this.adaptableApi.internalApi
+                    .getAdaptableInstance()
+                    .getPrimaryKeyValueFromRowNode(node), userDefinedCellClass);
+                const finalCellExcelStyle = Object.assign({}, ...excelStyles);
+                if (excelDataType === 'DateTime' && isDateCellExportedAsFormattedValue) {
+                    let dateFormatPattern = this.adaptableApi.optionsApi.getExportOptions().exportDateFormat;
+                    const abColumn = getAdaptableColumnWithColumnId(column.getColId());
+                    if (!dateFormatPattern) {
+                        const mostRelevantFormatColumn = this.adaptableApi.formatColumnApi.internalApi.getMostRelevantFormatColumnForColumn(getFormatColumnsWithDisplayFormatForColumn(column.getColId()), abColumn, { node, value: rawValue });
+                        dateFormatPattern =
+                            ((_a = mostRelevantFormatColumn === null || mostRelevantFormatColumn === void 0 ? void 0 : mostRelevantFormatColumn.DisplayFormat) === null || _a === void 0 ? void 0 : _a.Formatter) === 'DateFormatter' &&
+                                ((_c = (_b = mostRelevantFormatColumn === null || mostRelevantFormatColumn === void 0 ? void 0 : mostRelevantFormatColumn.DisplayFormat) === null || _b === void 0 ? void 0 : _b.Options) === null || _c === void 0 ? void 0 : _c.Pattern);
+                    }
+                    if (dateFormatPattern) {
+                        const normalisedValue = this.adaptableApi.internalApi
+                            .getAdaptableInstance()
+                            .getNormalisedValueFromRawValue(rawValue, abColumn);
+                        if (normalisedValue) {
+                            // we have to pass the date in the ISO format to Excel
+                            // see https://www.ag-grid.com/javascript-data-grid/excel-export-data-types/#dates
+                            // we can NOT use Date.toISOString() because we don't want the timezone corrections to kick in
+                            const isoFormattedValue = DateFormatter(normalisedValue, {
+                                Pattern: `yyyy-MM-dd'T'HH:mm:ss.SSS`,
+                            });
+                            if (isoFormattedValue) {
+                                finalCellExcelStyle.dataType = 'DateTime';
+                                finalCellExcelStyle.numberFormat = { format: dateFormatPattern };
+                                // create a new cell key to ensure any user provided className does not interfere
+                                const cellKey = this.adaptableApi.internalApi
+                                    .getAdaptableInstance()
+                                    .agGridColumnAdapter.getExcelClassNameForCell(column.getColId(), this.adaptableApi.internalApi
+                                    .getAdaptableInstance()
+                                    .getPrimaryKeyValueFromRowNode(node));
+                                // we need to register so that later the cellProcessor will put the isoFormattedValue through (thus giving the formatting responsability to Excel)
+                                this.registerExcelStyleWithFormattedDate(cellKey, isoFormattedValue);
+                            }
+                        }
+                    }
+                }
+                this.registerExcelStyle(finalCellExcelStyle, cellClassId);
+            });
+        }, forAllVisibleRowNodesDoConfig);
+    }
+    convertCSSToExcelStyle(style) {
+        const getHexColor = (color) => {
+            const preparedColor = getVariableColor(color);
+            const t = tinycolor(preparedColor);
+            const a = t.getAlpha();
+            return tinycolor.mix(tinycolor('white'), t, a * 100).toHexString();
+        };
+        let result = {};
+        if (style.backgroundColor != null) {
+            result.interior = {
+                color: getHexColor(style.backgroundColor),
+                pattern: 'Solid',
+            };
+        }
+        if (style.borderColor != null) {
+            const excelBorder = {
+                color: style.borderColor,
+                lineStyle: 'Continuous',
+                weight: 1,
+            };
+            result.borders = {
+                borderBottom: excelBorder,
+                borderLeft: excelBorder,
+                borderRight: excelBorder,
+                borderTop: excelBorder,
+            };
+        }
+        if (style.textAlign) {
+            result.alignment = {
+                horizontal: StringExtensions.CapitaliseFirstLetter(style.textAlign),
+            };
+        }
+        if (style.color != null) {
+            if (!result.font) {
+                result.font = {};
+            }
+            result.font = {
+                color: getHexColor(style.color),
+            };
+        }
+        if (style.fontStyle === 'italic') {
+            if (!result.font) {
+                result.font = {};
+            }
+            result.font.italic = true;
+        }
+        if (style.fontWeight != null &&
+            (style.fontWeight === 'bold' || Number(style.fontWeight) >= 600)) {
+            if (!result.font) {
+                result.font = {};
+            }
+            result.font.bold = true;
+        }
+        if (style.fontSize != null) {
+            if (!result.font) {
+                result.font = {};
+            }
+            result.font.size = convertCSSAbsoluteFontSizeToPt(style.fontSize);
+        }
+        return result;
+    }
+    resetExcelStyleMemoization() {
+        this.excelStylesCache = {};
+        this.cellClassKey2excelStyleIdMap = {};
+        this.excelStylesWithFormattedDate = {};
+    }
+    registerExcelStyle(excelStyle, cellClassKey) {
+        const excelStyleKey = JSON.stringify(excelStyle);
+        if (!this.excelStylesCache[excelStyleKey]) {
+            const excelStyleId = createUuid();
+            const excelStyleWithId = Object.assign(Object.assign({}, excelStyle), { id: excelStyleId });
+            this.excelStylesCache[excelStyleKey] = excelStyleWithId;
+        }
+        this.cellClassKey2excelStyleIdMap[cellClassKey] = this.excelStylesCache[excelStyleKey].id;
+    }
+    registerExcelStyleWithFormattedDate(cellClassId, isoFormattedValue) {
+        this.excelStylesWithFormattedDate[cellClassId] = isoFormattedValue;
+    }
 }

package/src/View/Components/NewScopeComponent.js

@@ -139,7 +139,7 @@ export const NewScopeComponent = (props) => {
     }
     const hasColumnTypes = React.useMemo(() => {
         var _a;
-        return ((_a = api.optionsApi.getColumnTypes()) === null || _a === void 0 ? void 0 : _a.length) > 0;
+        return ((_a = api.columnApi.getColumnTypes()) === null || _a === void 0 ? void 0 : _a.length) > 0;
     }, []);
     return (React.createElement(Tabs, { "data-name": 'scope-component', className: "ab-ScopeComponent", value: scopeChoice, style: Object.assign({ height: '100%' }, props.style), onValueChange: onScopeSelectChanged },
         props.hideWholeRow ? null : (React.createElement(Tabs.Tab, { value: "Row" },
@@ -165,7 +165,7 @@ export const NewScopeComponent = (props) => {
                 React.createElement(Flex, { flexDirection: "column" }, dataTypeOptions.map((dataTypeOption) => (React.createElement(CheckBox, { "data-name": "scope", "data-value": dataTypeOption.value, key: dataTypeOption.value, checked: dataTypesInScope && dataTypesInScope.includes(dataTypeOption.value), onChange: (checked) => onCheckBoxDataTypeChecked(checked, dataTypeOption.value) }, dataTypeOption.label))))))),
         hasColumnTypes && (React.createElement(Tabs.Content, { value: "ColumnType", style: { flex: 'none' }, "data-name": "column-type-scope" },
             React.createElement(Box, null,
-                React.createElement(Flex, { flexDirection: "column" }, (_b = (_a = api.optionsApi.getColumnTypes()) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.call(_a, (columnType) => {
+                React.createElement(Flex, { flexDirection: "column" }, (_b = (_a = api.columnApi.getColumnTypes()) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.call(_a, (columnType) => {
                     var _a;
                     return (React.createElement(CheckBox, { "data-name": "scope", "data-value": columnType, key: columnType, checked: 'ColumnTypes' in props.scope && ((_a = props.scope.ColumnTypes) === null || _a === void 0 ? void 0 : _a.includes(columnType)), onChange: (checked) => {
                             let columnTypes = [].concat(props.scope.ColumnTypes);

package/src/View/Components/Popups/GridCellPopup/GridCellPopup.js

@@ -20,7 +20,7 @@ const ConnectedNoteEditor = ({ enableEditMode }) => {
         return cellAddress ? GetNotesSelector(state.Notes, cellAddress) : [];
     });
     const handleNoteChange = React.useCallback((value) => {
-        api.notesApi.updateNoteText(value, note);
+        api.noteApi.updateNoteText(value, note);
     }, [note]);
     return (React.createElement(Flex, { onClick: () => enableEditMode(), flexDirection: "column", className: "ab-NotesPopup" },
         React.createElement(NoteEditor, { isReadonly: isReadonly, editMode: editMode, key: note === null || note === void 0 ? void 0 : note.Uuid, onClose: () => cellPopupService.hidePopup(), note: note === null || note === void 0 ? void 0 : note.Text, onNoteChange: (value) => handleNoteChange(value) })));

package/src/View/Layout/LayoutViewPanel.js

@@ -25,8 +25,9 @@ class LayoutViewPanelComponent extends React.Component {
             return Object.assign(Object.assign({}, layout), { label: layout.Name, value: layout.Name, onClick: () => this.props.onSelectLayout(layout.Name) });
         });
         const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
+        let layoutSelectStyle = elementType === 'ToolPanel' ? { minWidth: '100%' } : {};
         return (React.createElement(Flex, { flexDirection: "row", className: `ab-${elementType}__Layout__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
-            React.createElement(Flex, { flex: 1 },
+            React.createElement(Flex, { style: layoutSelectStyle, flex: 1 },
                 React.createElement(Select, { style: { width: '100%' }, options: availableLayoutOptions, className: `ab-${elementType}__Layout__select`, value: layoutEntity ? layoutEntity.Name : null, onChange: (layout) => this.props.onSelectLayout(layout) })),
             React.createElement(Flex, { flexDirection: "row", className: join(this.props.accessLevel == 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__Layout__wrap`) },
                 isManualSaveLayout && (React.createElement(ButtonSave, { className: `ab-${elementType}__Layout__save`, onClick: () => this.onSaveLayout(), tooltip: "Save Changes to Current Layout", disabled: !this.props.CanSave, accessLevel: accessLevel })),

package/src/View/Layout/Wizard/LayoutWizard.js

@@ -33,8 +33,9 @@ export const LayoutWizard = (props) => {
             preparedLayout = ObjectFactory.CreateEmptyLayout({ Name: '' });
         }
         if (preparedLayout.SuppressAggFuncInHeader === undefined) {
-            preparedLayout.SuppressAggFuncInHeader =
-                !!adaptable.agGridAdapter.initialGridOptions.suppressAggFuncInHeader;
+            preparedLayout.SuppressAggFuncInHeader = !!adaptable.agGridAdapter
+                .getAgGridApi()
+                .getGridOption('suppressAggFuncInHeader');
         }
         return preparedLayout;
     });

package/src/View/Notes/NotesPopup.js

@@ -45,8 +45,8 @@ export const NotesPopup = (props) => {
                 defaultWidth: 50,
                 render: (params) => {
                     return (React.createElement(AdaptableButtonComponent, { variant: "text", icon: "delete", onClick: () => {
-                            const note = adaptable.api.notesApi.getNoteByUuid(params.data.Uuid);
-                            adaptable.api.notesApi.deleteNote(note);
+                            const note = adaptable.api.noteApi.getNoteByUuid(params.data.Uuid);
+                            adaptable.api.noteApi.deleteNote(note);
                         } }));
                 },
             },
@@ -62,7 +62,7 @@ export const NotesPopup = (props) => {
                             const data = change.data;
                             const prevNote = allNotes.find((x) => x.Uuid === uuid);
                             if (prevNote.Text !== data.Text) {
-                                adaptable.api.notesApi.updateNoteText(data.Text, prevNote);
+                                adaptable.api.noteApi.updateNoteText(data.Text, prevNote);
                             }
                         }
                     }

package/src/View/SpecialColumnSettingsWizardStep.js

@@ -9,7 +9,7 @@ import { useAdaptable } from './AdaptableContext';
 export const SpecialColumnSettingsWizardStep = (props) => {
     var _a, _b, _c;
     const adaptable = useAdaptable();
-    const possibleColumnTypes = (_a = adaptable.api.optionsApi.getColumnTypes()) !== null && _a !== void 0 ? _a : [];
+    const possibleColumnTypes = (_a = adaptable.api.columnApi.getColumnTypes()) !== null && _a !== void 0 ? _a : [];
     const { Filterable, Resizable, Groupable, Sortable, Pivotable, Aggregatable, SuppressMenu, SuppressMovable, } = (_b = props.settings) !== null && _b !== void 0 ? _b : {};
     const handleColumnTypeChange = (columnType, checked) => {
         var _a, _b, _c;

package/src/agGrid/AdaptableAgGrid.d.ts

@@ -300,6 +300,8 @@ export declare class AdaptableAgGrid implements IAdaptable {
     canExportToExcel(): boolean;
     exportToExcel(reportData: ReportData, fileName: string): void;
     exportVisualDataToExcel(): void;
+    private processRowGroupForExcelExport;
+    private processCellForExcelExport;
     isQuickFilterAvailable(): boolean;
     private hasFloatingFilterOnAtLeastOneColumn;
     getChartRef(chartId: string): ChartRef;

package/src/agGrid/AdaptableAgGrid.js

@@ -360,7 +360,7 @@ export class AdaptableAgGrid {
         this.api.themeApi.applyCurrentTheme();
         this.validatePrimaryKey();
         this.embedColumnMenu = this.agGridAdapter.isModulePresent(ModuleNames.MenuModule);
-        this.api.internalApi.setTreeMode(this.agGridAdapter.initialGridOptions.treeData);
+        this.api.internalApi.setTreeMode(!!this.agGridAdapter.getAgGridApi().getGridOption('treeData'));
         // TODO AFL MIG: we could just patch the defautl Layout on init? instead
         this.checkShouldClearExistingFiltersOrSearches();
         this.applyColumnFiltering();
@@ -886,6 +886,13 @@ export class AdaptableAgGrid {
             }
             return original_floatingFiltersHeight;
         });
+        /**
+         * `excelStyles`
+         */
+        this.agGridOptionsService.setGridOptionsProperty(gridOptions, 'excelStyles', (original_excelStyles) => {
+            // we need this here just to register the original excelStyles in the service
+            return original_excelStyles;
+        });
         /**
          * `columnTypes`
          */
@@ -1058,7 +1065,7 @@ export class AdaptableAgGrid {
         return resultColDefs;
     }
     useRowNodeLookUp() {
-        return this.agGridAdapter.initialGridOptions.getRowId != undefined;
+        return this.agGridAdapter.getAgGridApi().getGridOption('getRowId') != undefined;
     }
     getAgGridContainerElement() {
         if (!this.DANGER_USE_GETTER_agGridContainerElement) {
@@ -1105,8 +1112,8 @@ export class AdaptableAgGrid {
         return selectedRowInfo;
     }
     isGridSelectable() {
-        return (this.agGridAdapter.initialGridOptions.rowSelection === 'single' ||
-            this.agGridAdapter.initialGridOptions.rowSelection === 'multiple');
+        const rowSelection = this.agGridAdapter.getAgGridApi().getGridOption('rowSelection');
+        return rowSelection === 'single' || rowSelection === 'multiple';
     }
     initAdaptableStore() {
         const perfNewAdaptableStore = this.logger.beginPerf(`initAdaptableStore()`);
@@ -1614,7 +1621,9 @@ export class AdaptableAgGrid {
         this.api.eventApi.on('AdaptableReady', () => {
             var _a, _b;
             // update status bar state
-            const adaptableStatusPanels = (_b = (_a = this.agGridAdapter.initialGridOptions.statusBar) === null || _a === void 0 ? void 0 : _a.statusPanels) === null || _b === void 0 ? void 0 : _b.filter((statusPanel) => this.adaptableStatusPanelKeys.includes(statusPanel.key));
+            const adaptableStatusPanels = (_b = (_a = this.agGridAdapter
+                .getAgGridApi()
+                .getGridOption('statusBar')) === null || _a === void 0 ? void 0 : _a.statusPanels) === null || _b === void 0 ? void 0 : _b.filter((statusPanel) => this.adaptableStatusPanelKeys.includes(statusPanel.key));
             const statusBarModule = this.ModuleService.getModuleById(ModuleConstants.StatusBarModuleId);
             // need to add only the adaptable panels
             statusBarModule.syncStateWithOptions(adaptableStatusPanels);
@@ -2407,10 +2416,10 @@ export class AdaptableAgGrid {
         });
     }
     getAgGridRowModelType() {
-        var _a, _b;
+        var _a;
         // it seems that this can be null so we need explicitly to return "clientSide" in this case
         // need to check that for ServerSideRowModel it is ALWAYS returned...
-        return (_b = (_a = this.agGridAdapter.initialGridOptions) === null || _a === void 0 ? void 0 : _a.rowModelType) !== null && _b !== void 0 ? _b : 'clientSide';
+        return (_a = this.agGridAdapter.getAgGridApi().getGridOption('rowModelType')) !== null && _a !== void 0 ? _a : 'clientSide';
     }
     getAllRowNodes(config) {
         let rowNodes = [];
@@ -2533,7 +2542,7 @@ export class AdaptableAgGrid {
     }
     canGenerateCharts() {
         return (this.agGridAdapter.isModulePresent(ModuleNames.GridChartsModule) &&
-            this.agGridAdapter.initialGridOptions.enableCharts);
+            this.agGridAdapter.getAgGridApi().getGridOption('enableCharts'));
     }
     canDisplaySparklines() {
         return this.agGridAdapter.isModulePresent(ModuleNames.SparklinesModule);
@@ -3048,52 +3057,82 @@ export class AdaptableAgGrid {
         ephemeralGridApi.destroy();
     }
     exportVisualDataToExcel() {
-        // // add adaptable style props to user defined props
-        // this.setExcelStylesForExport();
-        //
-        // this.gridOptions.api.exportDataAsExcel({
-        //   sheetName: 'Sheet 1',
-        //   fileName: this.ReportService.getReportFileName(this.adaptableOptions.adaptableId, 'Excel'),
-        //   // delegate the cell value processing to Adaptable
-        //   processCellCallback: ({ node, column, value }: ProcessCellForExportParams): string => {
-        //     const columnId = column.getColId();
-        //     if (
-        //         node?.group &&
-        //         (this.api.columnApi.isAutoRowGroupColumn(columnId) ||
-        //             // we would still need to process the cell if this is a group row with an aggregated value
-        //             node?.aggData?.[columnId] == undefined)
-        //     ) {
-        //       // skip processing of row groups, this was already handled in processRowGroupCallback()
-        //       return value;
-        //     }
-        //     return this.processCellForExcelExport(node, columnId);
-        //   },
-        //   processRowGroupCallback: (params: ProcessRowGroupForExportParams): string => {
-        //     // recreating the standard AG Grid styling for row groups: 'Parent -> Child'
-        //     // additionally the values are formatted
-        //     let rowGroupNode = params.node;
-        //     const isFooterRow = rowGroupNode.footer;
-        //     const rowGroupSummary = [this.processRowGroupForExcelExport(rowGroupNode) ?? ''];
-        //     while (rowGroupNode.parent) {
-        //       rowGroupNode = rowGroupNode.parent;
-        //       const formattedParentNode = this.processRowGroupForExcelExport(rowGroupNode);
-        //       if (formattedParentNode) {
-        //         rowGroupSummary.push(formattedParentNode);
-        //       }
-        //     }
-        //
-        //     let summary = rowGroupSummary.reverse().join(' -> ');
-        //     if (isFooterRow) {
-        //       summary = `Total: ${summary}`;
-        //     }
-        //     return summary;
-        //   },
-        // });
-        //
-        // // keep only the user defined props
-        // this.setGridOptionsProperty('excelStyles', (userExcelStyles) => {
-        //   return userExcelStyles;
-        // });
+        try {
+            const exportExcelStyles = this.ReportService.buildExcelStylesForVisualReports();
+            this.agGridOptionsService.CAREFUL_patchGridOptionsProperty('excelStyles', exportExcelStyles);
+            this.agGridAdapter.getAgGridApi().exportDataAsExcel({
+                sheetName: 'Sheet 1',
+                fileName: this.ReportService.getReportFileName(this.adaptableOptions.adaptableId, 'Excel'),
+                // delegate the cell value processing to Adaptable
+                processCellCallback: ({ node, column, value }) => {
+                    var _a;
+                    const columnId = column.getColId();
+                    if ((node === null || node === void 0 ? void 0 : node.group) &&
+                        (this.api.columnApi.isAutoRowGroupColumn(columnId) ||
+                            // we would still need to process the cell if this is a group row with an aggregated value
+                            ((_a = node === null || node === void 0 ? void 0 : node.aggData) === null || _a === void 0 ? void 0 : _a[columnId]) == undefined)) {
+                        // skip processing of row groups, this was already handled in processRowGroupCallback()
+                        return value;
+                    }
+                    return this.processCellForExcelExport(node, columnId);
+                },
+                processRowGroupCallback: (params) => {
+                    var _a;
+                    // recreating the standard AG Grid styling for row groups: 'Parent -> Child'
+                    // additionally the values are formatted
+                    let rowGroupNode = params.node;
+                    const isFooterRow = rowGroupNode.footer;
+                    const rowGroupSummary = [(_a = this.processRowGroupForExcelExport(rowGroupNode)) !== null && _a !== void 0 ? _a : ''];
+                    while (rowGroupNode.parent) {
+                        rowGroupNode = rowGroupNode.parent;
+                        const formattedParentNode = this.processRowGroupForExcelExport(rowGroupNode);
+                        if (formattedParentNode) {
+                            rowGroupSummary.push(formattedParentNode);
+                        }
+                    }
+                    let summary = rowGroupSummary.reverse().join(' -> ');
+                    if (isFooterRow) {
+                        summary = `Total: ${summary}`;
+                    }
+                    return summary;
+                },
+            });
+            this.agGridOptionsService.revertGridOptionsPropertyToUserValue('excelStyles');
+        }
+        catch (error) {
+            this.logger.consoleError('Error exporting visual data to Excel', error);
+        }
+    }
+    processRowGroupForExcelExport(rowNode) {
+        var _a, _b, _c, _d, _e;
+        const columnId = (_c = (_a = rowNode.field) !== null && _a !== void 0 ? _a : (_b = rowNode.rowGroupColumn) === null || _b === void 0 ? void 0 : _b.getColId()) !== null && _c !== void 0 ? _c : (_e = (_d = rowNode.rowGroupColumn) === null || _d === void 0 ? void 0 : _d.getColDef()) === null || _e === void 0 ? void 0 : _e.field;
+        if (!columnId || !rowNode.key) {
+            return;
+        }
+        let rawValue = rowNode.key;
+        if (this.api.columnApi.getColumnDataTypeForColumnId(columnId) === 'Date' &&
+            typeof rawValue === 'string' &&
+            // rawValue is composed only of digits
+            /^\d+$/.test(rawValue)) {
+            // AG-Grid converts the value to string, we have to reconvert it back
+            const dateRawValue = parseInt(rawValue);
+            if (dateRawValue != undefined) {
+                // @ts-ignore
+                rawValue = dateRawValue;
+            }
+        }
+        return this.ReportService.getCellExportValueFromRawValue(rowNode, rawValue, columnId);
+    }
+    processCellForExcelExport(rowNode, columnId) {
+        if (this.api.exportApi.internalApi.isVisualDataExportInProgress()) {
+            const cellKey = this.agGridColumnAdapter.getExcelClassNameForCell(columnId, this.getPrimaryKeyValueFromRowNode(rowNode));
+            const isoFormattedDate = this.ReportService.getExcelStyleWithFormattedDate(cellKey);
+            if (isoFormattedDate) {
+                // this is a Date cell which will be formatted by Excel
+                return isoFormattedDate;
+            }
+        }
+        return this.ReportService.getCellExportValueFromRowNode(rowNode, columnId);
     }
     isQuickFilterAvailable() {
         if (this.api.layoutApi.getCurrentLayout().EnablePivot) {

package/src/agGrid/AgGridAdapter.d.ts

@@ -25,6 +25,7 @@ export declare class AgGridAdapter {
     getLiveGridOptions(): GridOptions | undefined;
     updateGridOptions(options: ManagedGridOptions): void;
     setGridOption<Key extends ManagedGridOptionKey>(key: Key, value: GridOptions[Key]): void;
+    getUserGridOptionsProperty<T extends keyof GridOptions>(propertyName: T): GridOptions[T];
     updateColumnFilterActiveState(): void;
     deriveSelectedCellInfoFromAgGrid(): SelectedCellInfo;
     deriveSelectedRowInfoFromAgGrid(): SelectedRowInfo;

package/src/agGrid/AgGridAdapter.js

@@ -64,6 +64,9 @@ export class AgGridAdapter {
         var _a;
         (_a = this.getAgGridApi()) === null || _a === void 0 ? void 0 : _a.setGridOption(key, value);
     }
+    getUserGridOptionsProperty(propertyName) {
+        return this.adaptableInstance.agGridOptionsService.getUserGridOptionsProperty(propertyName);
+    }
     updateColumnFilterActiveState() {
         var _a;
         const columnFilters = this.adaptableApi.columnFilterApi.getActiveColumnFilters();

package/src/agGrid/AgGridColumnAdapter.d.ts

@@ -30,7 +30,7 @@ export declare class AgGridColumnAdapter {
     private setupColumnEditable;
     private setupColumnValueSetter;
     private setupColumnComparator;
-    private getExcelClassNameForCell;
+    getExcelClassNameForCell(colId: string, primaryKeyValue: any, userDefinedCellClass?: string | string[]): string;
     private isQuickSearchActive;
     private getEditableCellClass;
     private getReadonlyCellClass;

package/src/agGrid/AgGridColumnAdapter.js

@@ -606,14 +606,14 @@ export class AgGridColumnAdapter {
         if (!this.adaptableApi.internalApi.getModuleService().isModuleAvailable('Notes')) {
             return;
         }
-        if (!this.adaptableApi.notesApi.internalApi.areNotesAvailable()) {
+        if (!this.adaptableApi.noteApi.internalApi.areNotesAvailable()) {
             return;
         }
         const cellPosition = {
             PrimaryKeyValue: gridCell.primaryKeyValue,
             ColumnId: gridCell.column.columnId,
         };
-        const cellNotes = this.adaptableApi.notesApi.getCellNotes(cellPosition);
+        const cellNotes = this.adaptableApi.noteApi.getCellNotes(cellPosition);
         if (!(cellNotes === null || cellNotes === void 0 ? void 0 : cellNotes.length)) {
             return undefined;
         }