@mui/x-data-grid-premium 8.14.1 → 8.16.0

package/esm/hooks/features/chartsIntegration/useGridChartsIntegration.js

@@ -6,7 +6,7 @@ import debounce from '@mui/utils/debounce';
 import { gridColumnGroupsLookupSelector, gridColumnGroupsUnwrappedModelSelector, gridRowIdSelector, gridRowNodeSelector, gridRowTreeSelector } from '@mui/x-data-grid-pro';
 import { useGridApiMethod, useGridEvent, gridColumnLookupSelector, runIf, gridPivotActiveSelector, useGridRegisterPipeProcessor, gridColumnFieldsSelector, gridFilteredSortedDepthRowEntriesSelector, GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD } from '@mui/x-data-grid-pro/internals';
 import { getRowGroupingFieldFromGroupingCriteria } from "../rowGrouping/gridRowGroupingUtils.js";
-import { gridChartsPanelOpenSelector, gridChartsDimensionsSelector, gridChartsValuesSelector, gridChartsIntegrationActiveChartIdSelector, gridChartableColumnsSelector } from "./gridChartsIntegrationSelectors.js";
+import { gridChartsPanelOpenSelector, gridChartsDimensionsSelector, gridChartsValuesSelector, gridChartsIntegrationActiveChartIdSelector, gridChartableColumnsSelector, gridChartsIntegrationChartsLookupSelector } from "./gridChartsIntegrationSelectors.js";
 import { useGridChartsIntegrationContext } from "../../utils/useGridChartIntegration.js";
 import { isBlockedForSection } from "./utils.js";
 import { gridRowGroupingSanitizedModelSelector } from "../rowGrouping/gridRowGroupingSelector.js";
@@ -62,7 +62,6 @@ export const useGridChartsIntegration = (apiRef, props) => {
   const context = useGridChartsIntegrationContext(true);
   const isChartsIntegrationAvailable = !!props.chartsIntegration && !!props.experimentalFeatures?.charts && !!context;
   const activeChartId = gridChartsIntegrationActiveChartIdSelector(apiRef);
-  const orderedFields = gridColumnFieldsSelector(apiRef);
   const aggregationModel = gridAggregationModelSelector(apiRef);
   const pivotActive = gridPivotActiveSelector(apiRef);
   const pivotModel = gridPivotModelSelector(apiRef);
@@ -151,25 +150,28 @@ export const useGridChartsIntegration = (apiRef, props) => {
     if (!pivotActive && visibleValues.current[activeChartId] && rowGroupingModel.length > 0) {
       // with row grouping add the aggregation model to the newly added value dataset
       const aggregatedFields = Object.keys(aggregationModel);
+      const aggregationsToAdd = {};
       visibleValues.current[activeChartId].forEach(item => {
         const hasAggregation = aggregatedFields.includes(item.field);
         if (!hasAggregation) {
-          apiRef.current.setAggregationModel(_extends({}, aggregationModel, {
-            // use the first available aggregation function
-            [item.field]: getAvailableAggregationFunctions({
-              aggregationFunctions: props.aggregationFunctions,
-              colDef: item,
-              isDataSource: !!props.dataSource
-            })[0]
-          }));
+          // use the first available aggregation function
+          aggregationsToAdd[item.field] = getAvailableAggregationFunctions({
+            aggregationFunctions: props.aggregationFunctions,
+            colDef: item,
+            isDataSource: !!props.dataSource
+          })[0];
         }
       });
+      if (Object.keys(aggregationsToAdd).length > 0) {
+        apiRef.current.setAggregationModel(_extends({}, aggregationModel, aggregationsToAdd));
+      }
     }
   }, [apiRef, props.aggregationFunctions, props.dataSource, activeChartId, pivotActive, aggregationModel]);
   const handleRowDataUpdate = React.useCallback(chartIds => {
     if (chartIds.length === 0 || chartIds.some(chartId => !visibleDimensions.current[chartId] || !visibleValues.current[chartId])) {
       return;
     }
+    const orderedFields = gridColumnFieldsSelector(apiRef);
     const rowGroupingModel = gridRowGroupingSanitizedModelSelector(apiRef);
     const rowTree = gridRowTreeSelector(apiRef);
     const rowsPerDepth = gridFilteredSortedDepthRowEntriesSelector(apiRef);
@@ -226,7 +228,7 @@ export const useGridChartsIntegration = (apiRef, props) => {
         }))
       });
     });
-  }, [apiRef, orderedFields, getColumnName, getValueDatasetLabel, setChartState]);
+  }, [apiRef, getColumnName, getValueDatasetLabel, setChartState]);
   const debouncedHandleRowDataUpdate = React.useMemo(() => debounce(handleRowDataUpdate, 0), [handleRowDataUpdate]);
   const handleColumnDataUpdate = React.useCallback((chartIds, updatedChartStateLookup) => {
     // if there are no charts, skip the data processing
@@ -296,8 +298,8 @@ export const useGridChartsIntegration = (apiRef, props) => {
       }
     });
     updateOtherModels();
-    handleRowDataUpdate(chartIds);
-  }, [apiRef, chartStateLookup, pivotActive, pivotModel, handleRowDataUpdate, updateOtherModels]);
+    debouncedHandleRowDataUpdate(chartIds);
+  }, [apiRef, chartStateLookup, pivotActive, pivotModel, debouncedHandleRowDataUpdate, updateOtherModels]);
   const debouncedHandleColumnDataUpdate = React.useMemo(() => debounce(handleColumnDataUpdate, 0), [handleColumnDataUpdate]);
   const setChartsPanelOpen = React.useCallback(callback => {
     if (!isChartsIntegrationAvailable) {
@@ -496,6 +498,67 @@ export const useGridChartsIntegration = (apiRef, props) => {
   useGridEvent(apiRef, 'pivotModeChange', runIf(isChartsIntegrationAvailable, () => debouncedHandleColumnDataUpdate(syncedChartIds)));
   useGridEvent(apiRef, 'filteredRowsSet', runIf(isChartsIntegrationAvailable, () => debouncedHandleRowDataUpdate(syncedChartIds)));
   useGridEvent(apiRef, 'sortedRowsSet', runIf(isChartsIntegrationAvailable, () => debouncedHandleRowDataUpdate(syncedChartIds)));
+  const stateExportPreProcessing = React.useCallback((prevState, exportContext) => {
+    if (!props.chartsIntegration || !props.experimentalFeatures?.charts) {
+      return prevState;
+    }
+    const currentActiveChartId = gridChartsIntegrationActiveChartIdSelector(apiRef);
+    const chartsLookup = gridChartsIntegrationChartsLookupSelector(apiRef);
+    const integrationContextToExport = Object.fromEntries(Object.entries(chartStateLookup).map(([chartId, chartState]) => [chartId,
+    // keep only the state that is controlled by the user, drop the data and labels
+    {
+      synced: chartState.synced,
+      type: chartState.type,
+      configuration: chartState.configuration
+    }]));
+    const shouldExportChartState =
+    // Always export if the `exportOnlyDirtyModels` property is not activated
+    !exportContext.exportOnlyDirtyModels ||
+    // Always export if the chart state has been initialized
+    props.initialState?.chartsIntegration != null ||
+    // Export if the chart model or context is not empty
+    Object.keys(chartsLookup).length > 0 || Object.keys(integrationContextToExport).length > 0;
+    if (!shouldExportChartState) {
+      return prevState;
+    }
+    const chartStateToExport = {
+      activeChartId: currentActiveChartId,
+      charts: chartsLookup,
+      // add a custom prop to keep the integration context in the exported state
+      integrationContext: integrationContextToExport
+    };
+    return _extends({}, prevState, {
+      chartsIntegration: chartStateToExport
+    });
+  }, [apiRef, chartStateLookup, props.chartsIntegration, props.experimentalFeatures?.charts, props.initialState?.chartsIntegration]);
+  const stateRestorePreProcessing = React.useCallback((params, restoreContext) => {
+    const chartsRestoreState = restoreContext.stateToRestore.chartsIntegration;
+    if (!chartsRestoreState) {
+      return params;
+    }
+    const {
+      activeChartId: activeChartIdToRestore,
+      charts: chartsToRestore,
+      integrationContext
+    } = chartsRestoreState;
+    if (activeChartIdToRestore === undefined || chartsToRestore === undefined || Object.keys(chartsToRestore).length === 0) {
+      return params;
+    }
+    apiRef.current.setState(_extends({}, apiRef.current.state, {
+      chartsIntegration: {
+        activeChartId: activeChartIdToRestore,
+        charts: chartsToRestore
+      }
+    }));
+
+    // restore the integration context for each chart
+    Object.entries(integrationContext).forEach(([chartId, chartContextState]) => {
+      setChartState(chartId, chartContextState);
+    });
+    return params;
+  }, [apiRef, setChartState]);
+  useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
   React.useEffect(() => {
     if (!activeChartId && availableChartIds.length > 0) {
       setActiveChartId(availableChartIds[0]);

package/esm/hooks/features/dataSource/models.d.ts

@@ -1,4 +1,5 @@
 import type { GridColDef, GridRowId, GridValidRowModel, GridDataSource, GridGetRowsResponse, GridGetRowsParams, GridDataSourceApiBase, GridDataSourcePrivateApi, GridRowModel } from '@mui/x-data-grid-pro';
+import type { GridDataSourceFetchRowsParams } from '@mui/x-data-grid-pro/internals';
 import type { GridAggregationModel } from "../aggregation/gridAggregationInterfaces.js";
 import type { GridPivotModel } from "../pivoting/gridPivotingInterfaces.js";
 export interface GridGetRowsResponsePivotColumn {
@@ -90,9 +91,10 @@ export interface GridDataSourceApiBasePremium extends Omit<GridDataSourceApiBase
    * If no `parentId` option is provided, it fetches the root rows.
    * Any missing parameter from `params` will be filled from the state (sorting, filtering, etc.).
    * @param {GridRowId} parentId The id of the parent node (default: `GRID_ROOT_GROUP_ID`).
-   * @param {Partial<GridGetRowsParamsPremium>} params Request parameters override.
+   * @param {GridDataSourceFetchRowsParams<GridGetRowsParamsPremium>} params Request parameters override.
+   * @returns {Promise<void>} A promise that resolves when the rows are fetched.
    */
-  fetchRows: (parentId?: GridRowId, params?: Partial<GridGetRowsParamsPremium>) => void;
+  fetchRows: (parentId?: GridRowId, params?: GridDataSourceFetchRowsParams<GridGetRowsParamsPremium>) => Promise<void>;
 }
 export interface GridDataSourceApiPremium {
   /**

package/esm/hooks/features/dataSource/useGridDataSourcePremium.js

@@ -2,10 +2,13 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useGridEvent as addEventHandler, useGridApiMethod, GRID_ROOT_GROUP_ID, useGridEvent } from '@mui/x-data-grid-pro';
-import { useGridDataSourceBasePro, useGridRegisterStrategyProcessor, useGridRegisterPipeProcessor, gridPivotInitialColumnsSelector, runIf, gridPivotActiveSelector } from '@mui/x-data-grid-pro/internals';
+import { isDeepEqual } from '@mui/x-internals/isDeepEqual';
+import { useGridEvent as addEventHandler, useGridApiMethod, GRID_ROOT_GROUP_ID, useGridEvent, gridRowTreeSelector } from '@mui/x-data-grid-pro';
+import { useGridDataSourceBasePro, useGridRegisterStrategyProcessor, useGridRegisterPipeProcessor, gridPivotInitialColumnsSelector, runIf, gridPivotActiveSelector, GridStrategyGroup, DataSourceRowsUpdateStrategy, getGroupKeys } from '@mui/x-data-grid-pro/internals';
 import { gridPivotModelSelector } from "../pivoting/gridPivotingSelectors.js";
-import { getPropsOverrides } from "./utils.js";
+import { getPropsOverrides, fetchParents } from "./utils.js";
+import { gridRowGroupingSanitizedModelSelector } from "../rowGrouping/gridRowGroupingSelector.js";
+import { gridAggregationModelSelector } from "../aggregation/gridAggregationSelectors.js";
 function getKeyPremium(params) {
   return JSON.stringify([params.filterModel, params.sortModel, params.groupKeys, params.groupFields, params.start, params.end, params.pivotModel ? {} : params.aggregationModel, params.pivotModel]);
 }
@@ -15,13 +18,32 @@ const options = {
   }
 };
 export const useGridDataSourcePremium = (apiRef, props) => {
+  const aggregationModel = gridAggregationModelSelector(apiRef);
+  const groupingModelSize = gridRowGroupingSanitizedModelSelector(apiRef).length;
+  const setStrategyAvailability = React.useCallback(() => {
+    const targetStrategy = props.treeData || !props.disableRowGrouping && groupingModelSize > 0 ? DataSourceRowsUpdateStrategy.GroupedData : DataSourceRowsUpdateStrategy.Default;
+    apiRef.current.setStrategyAvailability(GridStrategyGroup.DataSource, targetStrategy, props.dataSource && !props.lazyLoading ? () => true : () => false);
+  }, [apiRef, props.dataSource, props.lazyLoading, props.treeData, props.disableRowGrouping, groupingModelSize]);
+  const handleEditRowWithAggregation = React.useCallback((params, updatedRow) => {
+    const rowTree = gridRowTreeSelector(apiRef);
+    if (updatedRow && !isDeepEqual(updatedRow, params.previousRow)) {
+      // Reset the outdated cache, only if the row is _actually_ updated
+      apiRef.current.dataSource.cache.clear();
+    }
+    const groupKeys = getGroupKeys(rowTree, params.rowId);
+    apiRef.current.updateNestedRows([updatedRow], groupKeys);
+    // To refresh the aggregation values of all parent rows and the footer row, recursively re-fetch all parent levels
+    fetchParents(rowTree, params.rowId, apiRef.current.dataSource.fetchRows);
+  }, [apiRef]);
   const {
     api,
     debouncedFetchRows,
-    strategyProcessor,
-    events,
-    setStrategyAvailability
-  } = useGridDataSourceBasePro(apiRef, props, options);
+    flatTreeStrategyProcessor,
+    groupedDataStrategyProcessor,
+    events
+  } = useGridDataSourceBasePro(apiRef, props, _extends({}, !props.disableAggregation && Object.keys(aggregationModel).length > 0 ? {
+    handleEditRow: handleEditRowWithAggregation
+  } : {}, options));
   const aggregateRowRef = React.useRef({});
   const initialColumns = gridPivotInitialColumnsSelector(apiRef);
   const pivotActive = gridPivotActiveSelector(apiRef);
@@ -74,7 +96,8 @@ export const useGridDataSourcePremium = (apiRef, props) => {
   });
   useGridApiMethod(apiRef, api.public, 'public');
   useGridApiMethod(apiRef, privateApi, 'private');
-  useGridRegisterStrategyProcessor(apiRef, strategyProcessor.strategyName, strategyProcessor.group, strategyProcessor.processor);
+  useGridRegisterStrategyProcessor(apiRef, flatTreeStrategyProcessor.strategyName, flatTreeStrategyProcessor.group, flatTreeStrategyProcessor.processor);
+  useGridRegisterStrategyProcessor(apiRef, groupedDataStrategyProcessor.strategyName, groupedDataStrategyProcessor.group, groupedDataStrategyProcessor.processor);
   useGridRegisterPipeProcessor(apiRef, 'processDataSourceRows', processDataSourceRows);
   Object.entries(events).forEach(([event, handler]) => {
     addEventHandler(apiRef, event, handler);

package/esm/hooks/features/dataSource/utils.d.ts

@@ -1,6 +1,7 @@
 import type { RefObject } from '@mui/x-internals/types';
-import { GridColDef } from '@mui/x-data-grid-pro';
+import { GridColDef, GridRowId, GridRowTreeConfig } from '@mui/x-data-grid-pro';
 import type { GridPrivateApiPremium } from "../../../models/gridApiPremium.js";
 import type { GridPivotingDynamicPropsOverrides, PivotingColDefCallback, GridPivotModel } from "../pivoting/gridPivotingInterfaces.js";
 import type { GridGetRowsResponsePivotColumn } from "./models.js";
-export declare const getPropsOverrides: (pivotColumns: GridGetRowsResponsePivotColumn[], pivotingColDef: PivotingColDefCallback, pivotModel: GridPivotModel, initialColumns: Map<string, GridColDef>, apiRef: RefObject<GridPrivateApiPremium>) => GridPivotingDynamicPropsOverrides;
+export declare const getPropsOverrides: (pivotColumns: GridGetRowsResponsePivotColumn[], pivotingColDef: PivotingColDefCallback, pivotModel: GridPivotModel, initialColumns: Map<string, GridColDef>, apiRef: RefObject<GridPrivateApiPremium>) => GridPivotingDynamicPropsOverrides;
+export declare const fetchParents: (rowTree: GridRowTreeConfig, rowId: GridRowId, fetchHandler: (id?: GridRowId) => Promise<void>) => Promise<void[]>;

package/esm/hooks/features/dataSource/utils.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { gridStringOrNumberComparator } from '@mui/x-data-grid-pro';
+import { gridStringOrNumberComparator, GRID_ROOT_GROUP_ID } from '@mui/x-data-grid-pro';
 export const getPropsOverrides = (pivotColumns, pivotingColDef, pivotModel, initialColumns, apiRef) => {
   const visiblePivotColumns = pivotModel.columns.filter(column => !column.hidden);
   const visiblePivotValues = pivotModel.values.filter(value => !value.hidden);
@@ -137,4 +137,16 @@ export const getPropsOverrides = (pivotColumns, pivotingColDef, pivotModel, init
     columnGroupingModel,
     aggregationModel
   };
+};
+export const fetchParents = (rowTree, rowId, fetchHandler) => {
+  const parents = [];
+
+  // collect all parents ids
+  let currentId = rowId;
+  while (currentId !== undefined && currentId !== GRID_ROOT_GROUP_ID) {
+    const parentId = rowTree[currentId].parent;
+    parents.push(parentId);
+    currentId = parentId;
+  }
+  return Promise.all(parents.reverse().map(fetchHandler));
 };

package/esm/hooks/features/editing/useGridCellEditable.d.ts

@@ -0,0 +1,8 @@
+import { RefObject } from '@mui/x-internals/types';
+import { CellEditableConditionFn } from '@mui/x-data-grid-pro/internals';
+import { GridPrivateApiPremium } from "../../../models/gridApiPremium.js";
+import { DataGridPremiumProcessedProps } from "../../../models/dataGridPremiumProps.js";
+/**
+ * Implementation of the cell editable condition hook of the Data Grid Premium
+ */
+export declare const useIsCellEditable: (apiRef: RefObject<GridPrivateApiPremium>, props: DataGridPremiumProcessedProps) => CellEditableConditionFn;

package/esm/hooks/features/editing/useGridCellEditable.js

@@ -0,0 +1,35 @@
+'use client';
+
+import * as React from 'react';
+import { useIsCellEditable as useIsCellEditableCommunity } from '@mui/x-data-grid-pro/internals';
+import { gridAggregationModelSelector } from "../aggregation/gridAggregationSelectors.js";
+
+/**
+ * Implementation of the cell editable condition hook of the Data Grid Premium
+ */
+export const useIsCellEditable = (apiRef, props) => {
+  const isCellEditableCommunity = useIsCellEditableCommunity();
+  return React.useCallback(params => {
+    const isCellEditable = isCellEditableCommunity(params);
+
+    // If the cell is not editable by the community hook, return false immediately
+    if (!isCellEditable) {
+      return false;
+    }
+
+    // If the data source is not used or aggregation is disabled or both tree data and row grouping are disabled, return the community hook result
+    if (!props.dataSource || props.disableAggregation || !props.treeData && props.disableRowGrouping) {
+      return isCellEditable;
+    }
+
+    // If the cell is not a part of the aggregation model, return the community hook result
+    const aggregationModelFields = Object.keys(gridAggregationModelSelector(apiRef));
+    if (!aggregationModelFields.includes(params.field)) {
+      return isCellEditable;
+    }
+
+    // The cell is a part of the aggregation model and it is retrieved from the server-side data.
+    // Allow editing only for the non-grouped rows.
+    return params.rowNode.type !== 'group';
+  }, [apiRef, props.dataSource, props.treeData, props.disableAggregation, props.disableRowGrouping, isCellEditableCommunity]);
+};

package/esm/hooks/features/export/gridExcelExportInterface.d.ts

@@ -1,4 +1,4 @@
-import type * as Excel from 'exceljs';
+import type * as Excel from '@mui/x-internal-exceljs-fork';
 import { GridFileExportOptions, GridExportFormat as GridExportFormatCommunity, GridExportExtension as GridExportExtensionCommunity } from '@mui/x-data-grid-pro';
 export type GridExportFormat = GridExportFormatCommunity | 'excel';
 export type GridExportExtension = GridExportExtensionCommunity | 'xlsx';

package/esm/hooks/features/export/serializer/excelSerializer.d.ts

@@ -1,4 +1,4 @@
-import type * as Excel from 'exceljs';
+import type * as Excel from '@mui/x-internal-exceljs-fork';
 import { RefObject } from '@mui/x-internals/types';
 import { GridRowId, GridColDef } from '@mui/x-data-grid-pro';
 import { GridStateColDef } from '@mui/x-data-grid/internals';

package/esm/hooks/features/export/serializer/utils.d.ts

@@ -1,4 +1,4 @@
-import type * as Excel from 'exceljs';
+import type * as Excel from '@mui/x-internal-exceljs-fork';
 import type { GridColumnGroupLookup } from '@mui/x-data-grid/internals';
 import type { GridExcelExportOptions } from "../gridExcelExportInterface.js";
 export declare const getExcelJs: () => Promise<typeof Excel>;

package/esm/hooks/features/export/serializer/utils.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 export const getExcelJs = async () => {
-  const excelJsModule = await import('exceljs');
+  const excelJsModule = await import('@mui/x-internal-exceljs-fork');
   return excelJsModule.default ?? excelJsModule;
 };
 export const addColumnGroupingHeaders = (worksheet, columns, columnGroupPaths, columnGroupDetails) => {

package/esm/hooks/features/rowGrouping/createGroupingColDef.js

@@ -84,12 +84,12 @@ function getGroupingCriteriaProperties(groupedByColDef, rowGroupingColumnMode, r
       const rowId = gridRowIdSelector(apiRef, row);
       const rowNode = gridRowNodeSelector(apiRef, rowId);
       if (rowNode?.type === 'group') {
-        const originalColDef = columnsLookup[rowNode.groupingField];
-        if (originalColDef.type === 'singleSelect') {
+        const originalColDef = rowNode.groupingField ? columnsLookup[rowNode.groupingField] : null;
+        if (originalColDef?.type === 'singleSelect') {
           // the default valueFormatter of a singleSelect colDef won't work with the grouping column values
           return value;
         }
-        const columnValueFormatter = originalColDef.valueFormatter;
+        const columnValueFormatter = originalColDef?.valueFormatter;
         if (typeof columnValueFormatter === 'function') {
           return columnValueFormatter(value, row, column, apiRef);
         }

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-premium v8.14.1
+ * @mui/x-data-grid-premium v8.16.0
  *
  * @license SEE LICENSE IN LICENSE
  * This source code is licensed under the SEE LICENSE IN LICENSE license found in the

package/esm/material/index.d.ts

@@ -25,6 +25,7 @@ declare const materialSlots: {
   promptRerunIcon: React.JSXElementConstructor<import("@mui/x-data-grid/models/gridBaseSlots").IconProps>;
   promptSortAscIcon: React.JSXElementConstructor<import("@mui/x-data-grid/models/gridBaseSlots").IconProps>;
   promptSortDescIcon: React.JSXElementConstructor<import("@mui/x-data-grid/models/gridBaseSlots").IconProps>;
+  promptChartsIcon: React.JSXElementConstructor<import("@mui/x-data-grid/models/gridBaseSlots").IconProps>;
   promptGroupIcon: React.JSXElementConstructor<import("@mui/x-data-grid/models/gridBaseSlots").IconProps>;
   promptFilterIcon: React.JSXElementConstructor<import("@mui/x-data-grid/models/gridBaseSlots").IconProps>;
   promptPivotIcon: React.JSXElementConstructor<import("@mui/x-data-grid/models/gridBaseSlots").IconProps>;

package/esm/material/index.js

@@ -33,6 +33,7 @@ const iconsSlots = {
   promptPivotIcon: GridPivotIcon,
   promptAggregationIcon: GridFunctionsIcon,
   promptGroupIcon: GridGroupWorkIcon,
+  promptChartsIcon: GridChartsIcon,
   promptChangesToggleIcon: GridExpandMoreIcon,
   chartsIcon: GridChartsIcon,
   chartsSearchIcon: GridSearchIcon,

package/esm/models/gridPremiumIconSlotsComponent.d.ts

@@ -132,6 +132,11 @@ export interface GridPremiumIconSlotsComponent {
    * @default GridArrowDownwardIcon
    */
   promptSortDescIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon used to mark the request to visalize the data
+   * @default GridChartsIcon
+   */
+  promptChartsIcon: React.JSXElementConstructor<IconProps>;
   /**
    * Icon used to display group changes
    * @default GridGroupWorkIcon

package/hooks/features/aiAssistant/gridAiAssistantInterfaces.d.ts

@@ -39,6 +39,10 @@ type Pivoting = {
   rows: string[];
   values: Aggregation[];
 } | {};
+type Chart = {
+  dimensions: string[];
+  values: string[];
+};
 export type PromptResponse = {
   conversationId: string;
   select: number;
@@ -48,6 +52,7 @@ export type PromptResponse = {
   sorting: ColumnSort[];
   grouping: Grouping[];
   pivoting: Pivoting;
+  chart: Chart | null;
 };
 export type PromptResolverOptions = {
   /**

package/hooks/features/aiAssistant/useGridAiAssistant.d.ts

@@ -3,4 +3,4 @@ import { GridStateInitializer } from '@mui/x-data-grid-pro/internals';
 import { GridPrivateApiPremium } from "../../../models/gridApiPremium.js";
 import { DataGridPremiumProcessedProps } from "../../../models/dataGridPremiumProps.js";
 export declare const aiAssistantStateInitializer: GridStateInitializer<Pick<DataGridPremiumProcessedProps, 'initialState' | 'aiAssistantConversations' | 'aiAssistant'>>;
-export declare const useGridAiAssistant: (apiRef: RefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "aiAssistant" | "aiAssistantConversations" | "aiAssistantActiveConversationIndex" | "allowAiAssistantDataSampling" | "onAiAssistantConversationsChange" | "onAiAssistantActiveConversationIndexChange" | "onPrompt" | "slots" | "disableColumnFilter" | "disableRowGrouping" | "disableAggregation" | "disableColumnSorting" | "disablePivoting">) => void;
+export declare const useGridAiAssistant: (apiRef: RefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "aiAssistant" | "aiAssistantConversations" | "aiAssistantActiveConversationIndex" | "allowAiAssistantDataSampling" | "onAiAssistantConversationsChange" | "onAiAssistantActiveConversationIndexChange" | "onPrompt" | "slots" | "rowSelection" | "disableColumnFilter" | "disableRowGrouping" | "disableAggregation" | "disableColumnSorting" | "disablePivoting" | "chartsIntegration" | "experimentalFeatures" | "getPivotDerivedColumns">) => void;

package/hooks/features/aiAssistant/useGridAiAssistant.js

@@ -9,11 +9,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.useGridAiAssistant = exports.aiAssistantStateInitializer = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
+var _isDeepEqual = require("@mui/x-internals/isDeepEqual");
 var _xDataGridPro = require("@mui/x-data-grid-pro");
 var _internals = require("@mui/x-data-grid-pro/internals");
 var _gridAiAssistantSelectors = require("./gridAiAssistantSelectors");
+var _gridChartsIntegrationSelectors = require("../chartsIntegration/gridChartsIntegrationSelectors");
 var _jsxRuntime = require("react/jsx-runtime");
 const DEFAULT_SAMPLE_COUNT = 5;
+const MAX_CHART_DATA_POINTS = 1000;
 const aiAssistantStateInitializer = (state, props) => {
   if (!props.aiAssistant) {
     return (0, _extends2.default)({}, state, {
@@ -36,12 +39,18 @@ const useGridAiAssistant = (apiRef, props) => {
     onPrompt,
     allowAiAssistantDataSampling,
     slots,
+    rowSelection,
     disableColumnFilter,
     disableRowGrouping,
     disableAggregation,
     disableColumnSorting,
-    disablePivoting
+    disablePivoting,
+    chartsIntegration,
+    experimentalFeatures,
+    getPivotDerivedColumns
   } = props;
+  const previousUnwrappedGroupingModel = React.useRef([]);
+  const activeChartId = (0, _gridChartsIntegrationSelectors.gridChartsIntegrationActiveChartIdSelector)(apiRef);
   const columnsLookup = (0, _xDataGridPro.gridColumnLookupSelector)(apiRef);
   const columns = Object.values(columnsLookup);
   const rows = Object.values((0, _xDataGridPro.gridRowsLookupSelector)(apiRef));
@@ -86,15 +95,38 @@ const useGridAiAssistant = (apiRef, props) => {
       return '';
     }
     const examples = allowDataSampling ? collectSampleData() : {};
-    const columnsContext = columns.map(column => ({
-      field: column.field,
-      description: column.description ?? null,
-      examples: examples[column.field] ?? column.examples ?? [],
-      type: column.type ?? 'string',
-      allowedOperators: column.filterOperators?.map(operator => operator.value) ?? []
-    }));
+    const columnsContext = columns.reduce((acc, column) => {
+      const columnContextWithoutExamples = {
+        field: column.field,
+        description: column.description ?? null,
+        examples: [],
+        type: column.type ?? 'string',
+        allowedOperators: column.filterOperators?.map(operator => operator.value) ?? []
+      };
+      acc.push((0, _extends2.default)({}, columnContextWithoutExamples, {
+        examples: examples[column.field] ?? column.examples ?? []
+      }));
+      if (disablePivoting) {
+        return acc;
+      }
+      (getPivotDerivedColumns?.(column, apiRef.current.getLocaleText) || []).forEach(col => acc.push((0, _extends2.default)({}, columnContextWithoutExamples, col, {
+        derivedFrom: column.field
+      })));
+      return acc;
+    }, []);
     return JSON.stringify(columnsContext);
-  }, [columns, collectSampleData, isAiAssistantAvailable]);
+  }, [apiRef, columns, collectSampleData, getPivotDerivedColumns, isAiAssistantAvailable, disablePivoting]);
+  const updateChart = React.useCallback(result => {
+    if (!result.chart) {
+      return;
+    }
+    apiRef.current.updateChartDimensionsData(activeChartId, result.chart.dimensions.map(item => ({
+      field: item
+    })));
+    apiRef.current.updateChartValuesData(activeChartId, result.chart.values.map(item => ({
+      field: item
+    })));
+  }, [apiRef, activeChartId]);
   const applyPromptResult = React.useCallback(result => {
     if (!isAiAssistantAvailable) {
       return;
@@ -123,6 +155,8 @@ const useGridAiAssistant = (apiRef, props) => {
         quickFilterValues: []
       });
       interestColumns.push(...result.filters.map(f => f.column));
+    } else {
+      result.filters = [];
     }
     let appliedPivoting = false;
     if (!disablePivoting && 'columns' in result.pivoting) {
@@ -146,6 +180,7 @@ const useGridAiAssistant = (apiRef, props) => {
       appliedPivoting = true;
     } else if ('columns' in result.pivoting) {
       // if pivoting is disabled and there are pivoting results, try to move them into grouping and aggregation
+      apiRef.current.setPivotActive(false);
       result.pivoting.columns.forEach(c => {
         result.grouping.push({
           column: c.column
@@ -162,26 +197,58 @@ const useGridAiAssistant = (apiRef, props) => {
       });
       // remove the pivoting results data
       result.pivoting = {};
+    } else {
+      apiRef.current.setPivotActive(false);
     }
     if (!disableRowGrouping && !appliedPivoting) {
       apiRef.current.setRowGroupingModel(result.grouping.map(g => g.column));
+    } else {
+      result.grouping = [];
     }
     if (!disableAggregation && !appliedPivoting) {
       apiRef.current.setAggregationModel(result.aggregation);
       interestColumns.push(...Object.keys(result.aggregation));
+    } else {
+      result.aggregation = {};
     }
     if (!disableColumnSorting) {
       apiRef.current.setSortModel(result.sorting.map(s => ({
         field: s.column,
         sort: s.direction
       })));
+    } else {
+      result.sorting = [];
+    }
+    if (experimentalFeatures?.charts && chartsIntegration && activeChartId && result.chart) {
+      if (appliedPivoting) {
+        const unsubscribe = apiRef.current.subscribeEvent('rowsSet', () => {
+          const unwrappedGroupingModel = Object.keys((0, _xDataGridPro.gridColumnGroupsUnwrappedModelSelector)(apiRef));
+          // wait until unwrapped grouping model changes
+          if (!result.chart || unwrappedGroupingModel.length === 0 || (0, _isDeepEqual.isDeepEqual)(previousUnwrappedGroupingModel.current, unwrappedGroupingModel)) {
+            return;
+          }
+          previousUnwrappedGroupingModel.current = unwrappedGroupingModel;
+          const visibleRowsCount = (0, _xDataGridPro.gridVisibleRowsSelector)(apiRef).rows.length;
+          const maxColumns = Math.floor(MAX_CHART_DATA_POINTS / visibleRowsCount);
+
+          // we assume that the pivoting was adjusted to what needs to be shown in the chart
+          // so we can just pick up all the columns that were created by pivoting
+          // to avoid rendering issues, set the limit to MAX_CHART_DATA_POINTS data points (rows * columns)
+          result.chart.values = unwrappedGroupingModel.slice(0, maxColumns);
+          updateChart(result);
+          unsubscribe();
+        });
+      } else {
+        updateChart(result);
+      }
     }
     const visibleRowsData = (0, _internals.getVisibleRows)(apiRef);
     const rowSelectionModel = {
       type: 'include',
       ids: new Set()
     };
-    if (result.select !== -1) {
+    const selection = rowSelection ? result.select : -1;
+    if (selection !== -1) {
       for (let i = 0; i < result.select; i += 1) {
         const row = visibleRowsData.rows[i];
         const id = apiRef.current.getRowId(row);
@@ -191,7 +258,7 @@ const useGridAiAssistant = (apiRef, props) => {
     apiRef.current.setRowSelectionModel(rowSelectionModel);
     const targetIndex = Number(columnsLookup[_xDataGridPro.GRID_CHECKBOX_SELECTION_FIELD] !== undefined) + Number(result.grouping.length);
     interestColumns.reverse().forEach(c => apiRef.current.setColumnIndex(c, targetIndex));
-  }, [apiRef, disableColumnFilter, disableRowGrouping, disableAggregation, disableColumnSorting, disablePivoting, columnsLookup, isAiAssistantAvailable]);
+  }, [apiRef, updateChart, rowSelection, disableColumnFilter, disableRowGrouping, disableAggregation, disableColumnSorting, disablePivoting, columnsLookup, isAiAssistantAvailable, activeChartId, chartsIntegration, experimentalFeatures?.charts]);
   const setActiveConversationId = React.useCallback(id => {
     if (!isAiAssistantAvailable) {
       return;

package/hooks/features/chartsIntegration/gridChartsIntegrationSelectors.d.ts

@@ -3,6 +3,12 @@ import { GridStatePremium } from "../../../models/gridStatePremium.js";
 export declare const gridChartsIntegrationActiveChartIdSelector: (args_0: import("react").RefObject<{
   state: GridStatePremium;
 } | null>) => string;
+export declare const gridChartsIntegrationChartsLookupSelector: (args_0: import("react").RefObject<{
+  state: GridStatePremium;
+} | null>) => Record<string, {
+  dimensions: import("./gridChartsIntegrationInterfaces.js").GridChartsIntegrationItem[];
+  values: import("./gridChartsIntegrationInterfaces.js").GridChartsIntegrationItem[];
+}>;
 export declare const gridChartsPanelOpenSelector: (args_0: import("react").RefObject<{
   state: GridStatePremium;
 } | null>) => boolean;

package/hooks/features/chartsIntegration/gridChartsIntegrationSelectors.js

@@ -3,12 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.gridChartsValuesSelector = exports.gridChartsPanelOpenSelector = exports.gridChartsIntegrationActiveChartIdSelector = exports.gridChartsDimensionsSelector = exports.gridChartableColumnsSelector = void 0;
+exports.gridChartsValuesSelector = exports.gridChartsPanelOpenSelector = exports.gridChartsIntegrationChartsLookupSelector = exports.gridChartsIntegrationActiveChartIdSelector = exports.gridChartsDimensionsSelector = exports.gridChartableColumnsSelector = void 0;
 var _internals = require("@mui/x-data-grid-pro/internals");
 var _sidebar = require("../sidebar");
 var _gridPivotingSelectors = require("../pivoting/gridPivotingSelectors");
 const gridChartsIntegrationStateSelector = (0, _internals.createRootSelector)(state => state.chartsIntegration);
 const gridChartsIntegrationActiveChartIdSelector = exports.gridChartsIntegrationActiveChartIdSelector = (0, _internals.createSelector)(gridChartsIntegrationStateSelector, chartsIntegration => chartsIntegration.activeChartId);
+const gridChartsIntegrationChartsLookupSelector = exports.gridChartsIntegrationChartsLookupSelector = (0, _internals.createSelector)(gridChartsIntegrationStateSelector, chartsIntegration => chartsIntegration.charts);
 const gridChartsPanelOpenSelector = exports.gridChartsPanelOpenSelector = (0, _internals.createSelector)(_sidebar.gridSidebarStateSelector, sidebar => sidebar.value === _sidebar.GridSidebarValue.Charts && sidebar.open);
 const gridChartableColumnsSelector = exports.gridChartableColumnsSelector = (0, _internals.createSelectorMemoized)(_internals.gridColumnLookupSelector, _internals.gridPivotActiveSelector, _gridPivotingSelectors.gridPivotModelSelector, (columns, pivotActive, pivotModel) => {
   let chartableColumns = Object.values(columns).filter(column => column.chartable);

package/hooks/features/chartsIntegration/useGridChartsIntegration.d.ts

@@ -1,7 +1,7 @@
 import { RefObject } from '@mui/x-internals/types';
 import { GridStateInitializer } from '@mui/x-data-grid-pro/internals';
 import type { DataGridPremiumProcessedProps } from "../../../models/dataGridPremiumProps.js";
-import { GridPrivateApiPremium } from "../../../models/gridApiPremium.js";
+import type { GridPrivateApiPremium } from "../../../models/gridApiPremium.js";
 import { ChartState } from "../../../models/gridChartsIntegration.js";
 export declare const EMPTY_CHART_INTEGRATION_CONTEXT_STATE: ChartState;
 export declare const chartsIntegrationStateInitializer: GridStateInitializer<Pick<DataGridPremiumProcessedProps, 'chartsIntegration' | 'initialState' | 'activeChartId' | 'rowGroupingModel' | 'pivotModel' | 'experimentalFeatures'>, GridPrivateApiPremium>;