@mui/x-data-grid-premium 8.11.3 → 8.12.0

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

@@ -1,9 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { isLeaf, gridStringOrNumberComparator } from '@mui/x-data-grid-pro';
 import { getDefaultColTypeDef } from '@mui/x-data-grid-pro/internals';
+import { COLUMN_GROUP_ID_SEPARATOR } from "../../../constants/columnGroups.js";
 import { isGroupingColumn } from "../rowGrouping/index.js";
 import { defaultGetAggregationPosition } from "../aggregation/gridAggregationUtils.js";
-const columnGroupIdSeparator = '>->';
 export const isPivotingAvailable = props => {
   return !props.disablePivoting;
 };
@@ -152,7 +152,7 @@ export const getPivotedData = ({
         }
         const formattedHeaderName = apiRef.current.getRowFormattedValue(row, column) || colValue;
         columnGroupPath.push(colValue);
-        const groupId = columnGroupPath.join(columnGroupIdSeparator);
+        const groupId = columnGroupPath.join(COLUMN_GROUP_ID_SEPARATOR);
         if (!columnGroupingModelLookup.has(groupId)) {
           const columnGroup = {
             groupId,
@@ -164,7 +164,7 @@ export const getPivotedData = ({
           if (depth === 0) {
             columnGroupingModel.push(columnGroup);
           } else {
-            const parentGroupId = columnGroupPath.slice(0, -1).join(columnGroupIdSeparator);
+            const parentGroupId = columnGroupPath.slice(0, -1).join(COLUMN_GROUP_ID_SEPARATOR);
             const parentGroup = columnGroupingModelLookup.get(parentGroupId);
             if (parentGroup) {
               parentGroup.children.push(columnGroup);
@@ -179,7 +179,7 @@ export const getPivotedData = ({
             if (!originalColumn) {
               return;
             }
-            const valueKey = `${columnGroupPath.join(columnGroupIdSeparator)}${columnGroupIdSeparator}${valueField}`;
+            const valueKey = `${columnGroupPath.join(COLUMN_GROUP_ID_SEPARATOR)}${COLUMN_GROUP_ID_SEPARATOR}${valueField}`;
             newRow[valueKey] = apiRef.current.getRowValue(row, originalColumn);
           });
         }
@@ -199,7 +199,7 @@ export const getPivotedData = ({
         if (visibleValues.length === 0) {
           // If there are no visible values, there are no actual columns added to the data grid, which leads to column groups not being visible.
           // Adding an empty column to each column group ensures that the column groups are visible.
-          const emptyColumnField = `${columnGroup.groupId}${columnGroupIdSeparator}empty`;
+          const emptyColumnField = `${columnGroup.groupId}${COLUMN_GROUP_ID_SEPARATOR}empty`;
           const emptyColumn = {
             field: emptyColumnField,
             headerName: '',
@@ -219,11 +219,13 @@ export const getPivotedData = ({
         } else {
           visibleValues.forEach(pivotValue => {
             const valueField = pivotValue.field;
-            const mapValueKey = `${columnGroup.groupId}${columnGroupIdSeparator}${valueField}`;
-            const overrides = typeof pivotingColDef === 'function' ? pivotingColDef(valueField, columnGroup.groupId.split(columnGroupIdSeparator)) : pivotingColDef;
+            const mapValueKey = `${columnGroup.groupId}${COLUMN_GROUP_ID_SEPARATOR}${valueField}`;
+            const overrides = typeof pivotingColDef === 'function' ? pivotingColDef(valueField, columnGroup.groupId.split(COLUMN_GROUP_ID_SEPARATOR)) : pivotingColDef;
             const column = _extends({
               headerName: String(valueField)
             }, getAttributesFromInitialColumn(pivotValue.field), overrides, {
+              // pivoting values are always numbers
+              type: 'number',
               field: mapValueKey,
               aggregable: false,
               groupable: false,

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

@@ -14,7 +14,9 @@ import { gridRowGroupingSanitizedModelSelector } from "./gridRowGroupingSelector
 import { jsx as _jsx } from "react/jsx-runtime";
 const GROUPING_COL_DEF_DEFAULT_PROPERTIES = _extends({}, GRID_STRING_COL_DEF, {
   type: 'custom',
-  disableReorder: true
+  disableReorder: true,
+  chartable: false,
+  aggregable: false
 });
 const GROUPING_COL_DEF_FORCED_PROPERTIES_DEFAULT = {
   editable: false,

package/esm/hooks/features/rowGrouping/gridRowGroupingUtils.d.ts

@@ -11,6 +11,7 @@ interface FilterRowTreeFromTreeDataParams {
   rowTree: GridRowTreeConfig;
   isRowMatchingFilters: GridAggregatedFilterItemApplier | null;
   filterModel: GridFilterModel;
+  filterValueGetter: (row: GridRowModel, column: GridColDef) => any;
   apiRef: RefObject<GridPrivateApiPremium>;
 }
 /**

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

@@ -30,7 +30,8 @@ export const filterRowTreeFromGroupingColumns = params => {
     apiRef,
     rowTree,
     isRowMatchingFilters,
-    filterModel
+    filterModel,
+    filterValueGetter
   } = params;
   const filteredRowsLookup = {};
   const filteredChildrenCountLookup = {};
@@ -67,7 +68,7 @@ export const filterRowTreeFromGroupingColumns = params => {
         isPassingFiltering = filteredDescendantCount > 0;
       } else {
         const allResults = [...ancestorsResults, filterResults];
-        isPassingFiltering = passFilterLogic(allResults.map(result => result.passingFilterItems), allResults.map(result => result.passingQuickFilterValues), filterModel, params.apiRef, filterCache);
+        isPassingFiltering = passFilterLogic(allResults.map(result => result.passingFilterItems), allResults.map(result => result.passingQuickFilterValues), filterModel, filterValueGetter, params.apiRef, filterCache);
       }
     }
     if (!isPassingFiltering) {

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

@@ -126,6 +126,7 @@ export const useGridRowGroupingPreProcessors = (apiRef, props) => {
       rowTree,
       isRowMatchingFilters: params.isRowMatchingFilters,
       filterModel: params.filterModel,
+      filterValueGetter: params.filterValueGetter,
       apiRef
     });
   }, [apiRef]);

package/esm/hooks/features/sidebar/gridSidebarInterfaces.d.ts

@@ -1,5 +1,6 @@
 export declare enum GridSidebarValue {
   Pivot = "pivot",
+  Charts = "charts",
 }
 export interface GridSidebarApi {
   /**

package/esm/hooks/features/sidebar/gridSidebarInterfaces.js

@@ -1,4 +1,5 @@
 export let GridSidebarValue = /*#__PURE__*/function (GridSidebarValue) {
   GridSidebarValue["Pivot"] = "pivot";
+  GridSidebarValue["Charts"] = "charts";
   return GridSidebarValue;
 }({});

package/esm/hooks/utils/index.d.ts

@@ -1 +1,2 @@
-export * from "./useKeepGroupedColumnsHidden.js";
+export * from "./useKeepGroupedColumnsHidden.js";
+export * from "./useGridChartIntegration.js";

package/esm/hooks/utils/index.js

@@ -1 +1,2 @@
-export * from "./useKeepGroupedColumnsHidden.js";
+export * from "./useKeepGroupedColumnsHidden.js";
+export * from "./useGridChartIntegration.js";

package/esm/hooks/utils/useGridChartIntegration.d.ts

@@ -0,0 +1,2 @@
+import { GridChartsIntegrationContextValue } from "../../models/gridChartsIntegration.js";
+export declare const useGridChartsIntegrationContext: (ignoreError?: boolean) => GridChartsIntegrationContextValue;

package/esm/hooks/utils/useGridChartIntegration.js

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { GridChartsIntegrationContext } from "../../components/chartsIntegration/GridChartsIntegrationContext.js";
+export const useGridChartsIntegrationContext = (ignoreError = false) => {
+  const context = React.useContext(GridChartsIntegrationContext);
+  if (!context && !ignoreError) {
+    throw new Error(['MUI X: Could not find the Data Grid charts integration context.', 'It looks like you rendered your component outside of a DataGrid, DataGridPro or DataGridPremium parent component.', 'This can also happen if you are bundling multiple versions of the Data Grid.'].join('\n'));
+  }
+  return context;
+};

package/esm/index.d.ts

@@ -14,6 +14,7 @@ export * from "./DataGridPremium/index.js";
 export * from "./hooks/index.js";
 export * from "./models/index.js";
 export * from "./components/index.js";
+export * from "./context/index.js";
 export { GridColumnHeaders } from '@mui/x-data-grid-pro';
 export type { GridColumnHeadersProps } from '@mui/x-data-grid-pro';
 export type { DataGridPremiumProps, GridExperimentalPremiumFeatures } from "./models/dataGridPremiumProps.js";

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-premium v8.11.3
+ * @mui/x-data-grid-premium v8.12.0
  *
  * @license SEE LICENSE IN LICENSE
  * This source code is licensed under the SEE LICENSE IN LICENSE license found in the
@@ -21,6 +21,7 @@ export * from "./DataGridPremium/index.js";
 export * from "./hooks/index.js";
 export * from "./models/index.js";
 export * from "./components/index.js";
+export * from "./context/index.js";
 export { GridColumnHeaders } from '@mui/x-data-grid-pro';
 export { useGridApiContext, useGridApiRef, useGridRootProps } from "./typeOverloads/reexports.js";
 export { GridColumnMenu, GRID_COLUMN_MENU_SLOTS, GRID_COLUMN_MENU_SLOT_PROPS } from "./components/reexports.js";

package/esm/material/icons.d.ts

@@ -12,4 +12,7 @@ export declare const GridPivotIcon: (props: import("@mui/x-data-grid").GridBaseI
 export declare const GridAssistantIcon: (props: import("@mui/x-data-grid").GridBaseIconProps) => React.ReactNode;
 export declare const GridPromptIcon: (props: import("@mui/x-data-grid").GridBaseIconProps) => React.ReactNode;
 export declare const GridRerunIcon: (props: import("@mui/x-data-grid").GridBaseIconProps) => React.ReactNode;
-export declare const GridHistoryIcon: (props: import("@mui/x-data-grid").GridBaseIconProps) => React.ReactNode;
+export declare const GridHistoryIcon: (props: import("@mui/x-data-grid").GridBaseIconProps) => React.ReactNode;
+export declare const GridChartsIcon: (props: import("@mui/x-data-grid").GridBaseIconProps) => React.ReactNode;
+export declare const GridSyncIcon: (props: import("@mui/x-data-grid").GridBaseIconProps) => React.ReactNode;
+export declare const GridSyncDisabledIcon: (props: import("@mui/x-data-grid").GridBaseIconProps) => React.ReactNode;

package/esm/material/icons.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { createSvgIcon } from '@mui/x-data-grid/internals';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const GridWorkspacesIcon = createSvgIcon(/*#__PURE__*/_jsx("g", {
   children: /*#__PURE__*/_jsx("path", {
     d: "M6,13c-2.2,0-4,1.8-4,4s1.8,4,4,4s4-1.8,4-4S8.2,13,6,13z M12,3C9.8,3,8,4.8,8,7s1.8,4,4,4s4-1.8,4-4S14.2,3,12,3z M18,13 c-2.2,0-4,1.8-4,4s1.8,4,4,4s4-1.8,4-4S20.2,13,18,13z"
@@ -44,4 +44,18 @@ export const GridRerunIcon = createSvgIcon(/*#__PURE__*/_jsx("path", {
 }), 'Rerun');
 export const GridHistoryIcon = createSvgIcon(/*#__PURE__*/_jsx("path", {
   d: "M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9m-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8z"
-}), 'History');
+}), 'History');
+export const GridChartsIcon = createSvgIcon(/*#__PURE__*/_jsxs("g", {
+  children: [/*#__PURE__*/_jsx("path", {
+    d: "M0 0h24v24H0z",
+    fill: "none"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z"
+  })]
+}), 'Charts');
+export const GridSyncIcon = createSvgIcon(/*#__PURE__*/_jsx("path", {
+  d: "M10 4.26v2.09C7.67 7.18 6 9.39 6 12c0 1.77.78 3.34 2 4.44V14h2v6H4v-2h2.73C5.06 16.54 4 14.4 4 12c0-3.73 2.55-6.85 6-7.74M20 4h-6v6h2V7.56c1.22 1.1 2 2.67 2 4.44h2c0-2.4-1.06-4.54-2.73-6H20zm0 13v-1c0-1.1-.9-2-2-2s-2 .9-2 2v1c-.55 0-1 .45-1 1v3c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-3c0-.55-.45-1-1-1m-1 0h-2v-1c0-.55.45-1 1-1s1 .45 1 1z"
+}), 'Sync');
+export const GridSyncDisabledIcon = createSvgIcon(/*#__PURE__*/_jsx("path", {
+  d: "M10 6.35V4.26c-.8.21-1.55.54-2.23.96l1.46 1.46c.25-.12.5-.24.77-.33m-7.14-.94 2.36 2.36C4.45 8.99 4 10.44 4 12c0 2.21.91 4.2 2.36 5.64L4 20h6v-6l-2.24 2.24C6.68 15.15 6 13.66 6 12c0-1 .25-1.94.68-2.77l8.08 8.08c-.25.13-.5.25-.77.34v2.09c.8-.21 1.55-.54 2.23-.96l2.36 2.36 1.27-1.27L4.14 4.14zM20 4h-6v6l2.24-2.24C17.32 8.85 18 10.34 18 12c0 1-.25 1.94-.68 2.77l1.46 1.46C19.55 15.01 20 13.56 20 12c0-2.21-.91-4.2-2.36-5.64z"
+}), 'SyncDisabled');

package/esm/material/index.d.ts

@@ -30,5 +30,16 @@ declare const materialSlots: {
   promptPivotIcon: React.JSXElementConstructor<import("@mui/x-data-grid/models/gridBaseSlots").IconProps>;
   promptAggregationIcon: React.JSXElementConstructor<import("@mui/x-data-grid/models/gridBaseSlots").IconProps>;
   promptChangesToggleIcon: React.JSXElementConstructor<import("@mui/x-data-grid/models/gridBaseSlots").IconProps>;
+  chartsIcon: React.JSXElementConstructor<import("@mui/x-data-grid/models/gridBaseSlots").IconProps>;
+  chartsSearchIcon: React.JSXElementConstructor<import("@mui/x-data-grid/models/gridBaseSlots").IconProps>;
+  chartsSearchClearIcon: React.JSXElementConstructor<import("@mui/x-data-grid/models/gridBaseSlots").IconProps>;
+  chartsMenuMoveUpIcon: React.JSXElementConstructor<import("@mui/x-data-grid/models/gridBaseSlots").IconProps>;
+  chartsMenuMoveDownIcon: React.JSXElementConstructor<import("@mui/x-data-grid/models/gridBaseSlots").IconProps>;
+  chartsMenuMoveToTopIcon: React.JSXElementConstructor<import("@mui/x-data-grid/models/gridBaseSlots").IconProps>;
+  chartsMenuMoveToBottomIcon: React.JSXElementConstructor<import("@mui/x-data-grid/models/gridBaseSlots").IconProps>;
+  chartsMenuAddIcon: React.JSXElementConstructor<import("@mui/x-data-grid/models/gridBaseSlots").IconProps>;
+  chartsMenuRemoveIcon: React.JSXElementConstructor<import("@mui/x-data-grid/models/gridBaseSlots").IconProps>;
+  chartsSyncIcon: React.JSXElementConstructor<import("@mui/x-data-grid/models/gridBaseSlots").IconProps>;
+  chartsSyncDisabledIcon: React.JSXElementConstructor<import("@mui/x-data-grid/models/gridBaseSlots").IconProps>;
 };
 export default materialSlots;

package/esm/material/index.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { GridSearchIcon, GridClearIcon, GridAddIcon, GridCheckIcon, GridExpandMoreIcon, GridDeleteIcon, GridCloseIcon } from '@mui/x-data-grid';
 import { GridArrowDownwardIcon, GridArrowUpwardIcon, GridFilterAltIcon } from '@mui/x-data-grid-pro';
-import { GridWorkspacesIcon, GridGroupWorkIcon, GridFunctionsIcon, GridMoveToTopIcon, GridMoveToBottomIcon, GridExpandLessIcon, GridPivotIcon, GridSendIcon, GridMicIcon, GridMicOffIcon, GridAssistantIcon, GridPromptIcon, GridRerunIcon, GridHistoryIcon } from "./icons.js";
+import { GridWorkspacesIcon, GridGroupWorkIcon, GridFunctionsIcon, GridMoveToTopIcon, GridMoveToBottomIcon, GridExpandLessIcon, GridPivotIcon, GridSendIcon, GridMicIcon, GridMicOffIcon, GridAssistantIcon, GridPromptIcon, GridRerunIcon, GridHistoryIcon, GridChartsIcon, GridSyncDisabledIcon, GridSyncIcon } from "./icons.js";
 const iconsSlots = {
   collapsibleIcon: GridExpandMoreIcon,
   columnMenuUngroupIcon: GridWorkspacesIcon,
@@ -33,7 +33,18 @@ const iconsSlots = {
   promptPivotIcon: GridPivotIcon,
   promptAggregationIcon: GridFunctionsIcon,
   promptGroupIcon: GridGroupWorkIcon,
-  promptChangesToggleIcon: GridExpandMoreIcon
+  promptChangesToggleIcon: GridExpandMoreIcon,
+  chartsIcon: GridChartsIcon,
+  chartsSearchIcon: GridSearchIcon,
+  chartsSearchClearIcon: GridClearIcon,
+  chartsMenuMoveUpIcon: GridExpandLessIcon,
+  chartsMenuMoveDownIcon: GridExpandMoreIcon,
+  chartsMenuMoveToTopIcon: GridMoveToTopIcon,
+  chartsMenuMoveToBottomIcon: GridMoveToBottomIcon,
+  chartsMenuAddIcon: GridAddIcon,
+  chartsMenuRemoveIcon: GridDeleteIcon,
+  chartsSyncIcon: GridSyncIcon,
+  chartsSyncDisabledIcon: GridSyncDisabledIcon
 };
 const materialSlots = _extends({}, iconsSlots);
 export default materialSlots;

package/esm/models/dataGridPremiumProps.d.ts

@@ -4,13 +4,16 @@ import { GridExperimentalProFeatures, DataGridProPropsWithDefaultValue, DataGrid
 import type { GridRowGroupingModel } from "../hooks/features/rowGrouping/index.js";
 import type { GridAggregationModel, GridAggregationFunction, GridAggregationFunctionDataSource, GridAggregationPosition } from "../hooks/features/aggregation/index.js";
 import { GridPremiumSlotsComponent } from "./gridPremiumSlotsComponent.js";
+import { GridPremiumSlotProps } from "./gridPremiumSlotProps.js";
 import { GridInitialStatePremium } from "./gridStatePremium.js";
 import { GridApiPremium } from "./gridApiPremium.js";
 import { GridCellSelectionModel } from "../hooks/features/cellSelection/index.js";
 import type { GridPivotingColDefOverrides, GridPivotModel } from "../hooks/features/pivoting/gridPivotingInterfaces.js";
 import { GridDataSourcePremium as GridDataSource, GridGetRowsParamsPremium as GridGetRowsParams } from "../hooks/features/dataSource/models.js";
 import { Conversation, PromptResponse, PromptSuggestion } from "../hooks/features/aiAssistant/gridAiAssistantInterfaces.js";
-export interface GridExperimentalPremiumFeatures extends GridExperimentalProFeatures {}
+export interface GridExperimentalPremiumFeatures extends GridExperimentalProFeatures {
+  charts?: boolean;
+}
 export interface DataGridPremiumPropsWithComplexDefaultValueBeforeProcessing extends Pick<DataGridPropsWithComplexDefaultValueBeforeProcessing, 'localeText'> {
   /**
    * Overridable components.
@@ -102,6 +105,11 @@ export interface DataGridPremiumPropsWithDefaultValue<R extends GridValidRowMode
    * @default false
    */
   aiAssistant: boolean;
+  /**
+   * If `true`, the charts integration feature is enabled.
+   * @default false
+   */
+  chartsIntegration: boolean;
 }
 export interface DataGridPremiumPropsWithoutDefaultValue<R extends GridValidRowModel = any> extends Omit<DataGridProPropsWithoutDefaultValue<R>, 'initialState' | 'apiRef' | 'dataSource' | 'onDataSourceError'> {
   /**
@@ -114,6 +122,10 @@ export interface DataGridPremiumPropsWithoutDefaultValue<R extends GridValidRowM
    * If one of the data in `initialState` is also being controlled, then the control state wins.
    */
   initialState?: GridInitialStatePremium;
+  /**
+   * Overridable components props dynamically passed to the component at rendering.
+   */
+  slotProps?: GridPremiumSlotProps;
   /**
    * Set the row grouping model of the grid.
    */
@@ -270,4 +282,13 @@ export interface DataGridPremiumPropsWithoutDefaultValue<R extends GridValidRowM
    * @param {GridCallbackDetails} details Additional details for this callback.
    */
   onSidebarOpen?: GridEventListener<'sidebarOpen'>;
+  /**
+   * The id of the active chart.
+   */
+  activeChartId?: string;
+  /**
+   * Callback fired when the active chart changes.
+   * @param {string} activeChartId The new active chart id.
+   */
+  onActiveChartIdChange?: (activeChartId: string) => void;
 }

package/esm/models/gridApiPremium.d.ts

@@ -10,9 +10,10 @@ import type { GridAggregationPrivateApi } from "../hooks/features/aggregation/gr
 import type { GridPivotingApi, GridPivotingPrivateApi } from "../hooks/features/pivoting/gridPivotingInterfaces.js";
 import { GridAiAssistantApi } from "../hooks/features/aiAssistant/gridAiAssistantInterfaces.js";
 import { GridSidebarApi } from "../hooks/features/sidebar/gridSidebarInterfaces.js";
+import { GridChartsIntegrationApi, GridChartsIntegrationPrivateApi } from "../hooks/features/chartsIntegration/gridChartsIntegrationInterfaces.js";
 /**
  * The api of Data Grid Premium.
  * TODO: Do not redefine manually the pro features
  */
-export interface GridApiPremium extends GridApiCommon<GridStatePremium, GridInitialStatePremium>, GridRowProApi, GridColumnPinningApi, GridDetailPanelApi, GridRowGroupingApi, GridExcelExportApi, GridAggregationApi, GridRowPinningApi, GridDataSourceApiPremium, GridCellSelectionApi, GridPivotingApi, GridAiAssistantApi, GridSidebarApi, GridRowMultiSelectionApi, GridColumnReorderApi {}
-export interface GridPrivateApiPremium extends GridApiPremium, GridPrivateOnlyApiCommon<GridApiPremium, GridPrivateApiPremium, DataGridPremiumProcessedProps>, GridDataSourcePremiumPrivateApi, GridAggregationPrivateApi, GridDetailPanelPrivateApi, GridRowReorderPrivateApi, GridPivotingPrivateApi {}
+export interface GridApiPremium extends GridApiCommon<GridStatePremium, GridInitialStatePremium>, GridRowProApi, GridColumnPinningApi, GridDetailPanelApi, GridRowGroupingApi, GridExcelExportApi, GridAggregationApi, GridRowPinningApi, GridDataSourceApiPremium, GridCellSelectionApi, GridPivotingApi, GridAiAssistantApi, GridSidebarApi, GridChartsIntegrationApi, GridRowMultiSelectionApi, GridColumnReorderApi {}
+export interface GridPrivateApiPremium extends GridApiPremium, GridPrivateOnlyApiCommon<GridApiPremium, GridPrivateApiPremium, DataGridPremiumProcessedProps>, GridDataSourcePremiumPrivateApi, GridAggregationPrivateApi, GridDetailPanelPrivateApi, GridRowReorderPrivateApi, GridPivotingPrivateApi, GridChartsIntegrationPrivateApi {}

package/esm/models/gridChartsIntegration.d.ts

@@ -0,0 +1,17 @@
+import type { Dataset } from '@mui/x-internals/types';
+export type ChartState = {
+  label?: string;
+  synced: boolean;
+  dimensions: Dataset<string | number | null>;
+  values: Dataset<number | null>;
+  type: string;
+  configuration: Record<string, string | number | boolean | null>;
+  dimensionsLabel?: string;
+  valuesLabel?: string;
+  maxDimensions?: number;
+  maxValues?: number;
+};
+export interface GridChartsIntegrationContextValue {
+  chartStateLookup: Record<string, ChartState>;
+  setChartState: (id: string, state: Partial<ChartState>) => void;
+}

package/esm/models/gridChartsIntegration.js

@@ -0,0 +1 @@
+export {};

package/esm/models/gridPremiumIconSlotsComponent.d.ts

@@ -157,5 +157,60 @@ export interface GridPremiumIconSlotsComponent {
    * @default GridExpandMoreIcon
    */
   promptChangesToggleIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon used for the charts configuration button
+   * @default GridChartsIcon
+   */
+  chartsIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon used for the search icon in the sidebar search field in the charts configuration panel
+   * @default GridSearchIcon
+   */
+  chartsSearchIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon used for the clear button in the sidebar search field in the charts configuration panel
+   * @default GridClearIcon
+   */
+  chartsSearchClearIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon used for the move up button in the charts configuration panel menu
+   * @default GridExpandLessIcon
+   */
+  chartsMenuMoveUpIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon used for the move down button in the charts configuration panel menu
+   * @default GridExpandMoreIcon
+   */
+  chartsMenuMoveDownIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon used for the move to top button in the charts configuration panel menu
+   * @default GridMoveToTopIcon
+   */
+  chartsMenuMoveToTopIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon used for the move to bottom button in the charts configuration panel menu
+   * @default GridMoveToBottomIcon
+   */
+  chartsMenuMoveToBottomIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon used for the add button in the charts configuration panel menu
+   * @default GridAddIcon
+   */
+  chartsMenuAddIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon used for the remove button in the charts configuration panel menu
+   * @default GridDeleteIcon
+   */
+  chartsMenuRemoveIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon used for the sync button in the charts configuration panel when sync is enabled
+   * @default GridSyncIcon
+   */
+  chartsSyncIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon used for the sync button in the charts configuration panel when sync is disabled
+   * @default GridSyncDisabledIcon
+   */
+  chartsSyncDisabledIcon: React.JSXElementConstructor<IconProps>;
 }
 export {};

package/esm/models/gridPremiumSlotProps.d.ts

@@ -0,0 +1,8 @@
+import { GridProSlotProps } from '@mui/x-data-grid-pro/internals';
+import type { GridChartsPanelProps } from "../components/chartsPanel/GridChartsPanel.js";
+export interface GridChartsPanelPropsOverrides {}
+type SlotProps<Props, Overrides> = Partial<Props & Overrides>;
+export interface GridPremiumSlotProps extends GridProSlotProps {
+  chartsPanel?: SlotProps<GridChartsPanelProps, GridChartsPanelPropsOverrides>;
+}
+export {};

package/esm/models/gridPremiumSlotProps.js

@@ -0,0 +1 @@
+export {};

package/esm/models/gridPremiumSlotsComponent.d.ts

@@ -11,6 +11,12 @@ export interface GridPremiumSlotsComponent extends GridProSlotsComponent, GridPr
    * @default null
    */
   aiAssistantPanel: React.JSXElementConstructor<any> | null;
+  /**
+   * Component rendered when charts panel is open. Only needed when `chartsIntegration` prop is passed to the grid.
+   * Pass `GridChartsPanel` to render the default charts panel.
+   * @default null
+   */
+  chartsPanel: React.JSXElementConstructor<any> | null;
   /**
    * Component rendered when pivot mode is enabled but no rows are defined.
    * @default GridEmptyPivotOverlay

package/esm/models/gridStatePremium.d.ts

@@ -1,8 +1,9 @@
 import { GridInitialState as GridInitialStatePro, GridState as GridStatePro } from '@mui/x-data-grid-pro';
 import type { GridRowGroupingState, GridRowGroupingInitialState, GridAggregationState, GridAggregationInitialState, GridCellSelectionModel } from "../hooks/index.js";
 import type { GridPivotingInitialState, GridPivotingState } from "../hooks/features/pivoting/gridPivotingInterfaces.js";
-import { GridAiAssistantInitialState, GridAiAssistantState } from "../hooks/features/aiAssistant/gridAiAssistantInterfaces.js";
-import { GridSidebarInitialState, GridSidebarState } from "../hooks/features/sidebar/gridSidebarState.js";
+import type { GridAiAssistantInitialState, GridAiAssistantState } from "../hooks/features/aiAssistant/gridAiAssistantInterfaces.js";
+import type { GridSidebarInitialState, GridSidebarState } from "../hooks/features/sidebar/gridSidebarState.js";
+import type { GridChartsIntegrationState, GridChartsIntegrationInitialState } from "../hooks/features/chartsIntegration/gridChartsIntegrationInterfaces.js";
 /**
  * The state of Data Grid Premium.
  */
@@ -13,6 +14,7 @@ export interface GridStatePremium extends GridStatePro {
   pivoting: GridPivotingState;
   aiAssistant: GridAiAssistantState;
   sidebar: GridSidebarState;
+  chartsIntegration: GridChartsIntegrationState;
 }
 /**
  * The initial state of Data Grid Premium.
@@ -24,4 +26,5 @@ export interface GridInitialStatePremium extends GridInitialStatePro {
   pivoting?: GridPivotingInitialState;
   aiAssistant?: GridAiAssistantInitialState;
   sidebar?: GridSidebarInitialState;
+  chartsIntegration?: GridChartsIntegrationInitialState;
 }

package/esm/typeOverloads/modules.d.ts

@@ -59,6 +59,12 @@ export interface GridControlledStateEventLookupPremium {
   aiAssistantActiveConversationIndexChange: {
     params: number;
   };
+  /**
+   * Fired when the active chart id changes.
+   */
+  activeChartIdChange: {
+    params: string;
+  };
 }
 interface GridEventLookupPremium extends GridEventLookupPro {
   /**
@@ -89,6 +95,15 @@ interface GridEventLookupPremium extends GridEventLookupPro {
       value: GridSidebarValue;
     };
   };
+  /**
+   * Fired when the chart synchronization state changes.
+   */
+  chartSynchronizationStateChange: {
+    params: {
+      chartId: string;
+      synced: boolean;
+    };
+  };
 }
 export interface GridColDefPremium<R extends GridValidRowModel = any, V = any, F = V> {
   /**
@@ -123,6 +138,11 @@ export interface GridColDefPremium<R extends GridValidRowModel = any, V = any, F
    * @default true
    */
   pivotable?: boolean;
+  /**
+   * If `false`, the column will not be available for charts integration.
+   * @default true
+   */
+  chartable?: boolean;
 }
 export interface GridRenderCellParamsPremium<R extends GridValidRowModel = any, V = any, F = V> {
   aggregation?: GridAggregationCellMeta;

package/hooks/features/aggregation/createAggregationLookup.js

@@ -10,7 +10,7 @@ const shouldApplySorting = (aggregationRules, aggregatedFields) => {
   return aggregatedFields.some(field => aggregationRules[field].aggregationFunction.applySorting);
 };
 exports.shouldApplySorting = shouldApplySorting;
-const getGroupAggregatedValue = (groupId, apiRef, aggregationRowsScope, aggregatedFields, aggregationRules, position, applySorting, valueGetters, publicApi, groupAggregatedValuesLookup) => {
+const getGroupAggregatedValue = (groupId, apiRef, aggregationRowsScope, aggregatedFields, aggregationRules, position, applySorting, valueGetters, publicApi, groupAggregatedValuesLookup, columnsLookup) => {
   const groupAggregationLookup = {};
   const aggregatedValues = [];
   for (let i = 0; i < aggregatedFields.length; i += 1) {
@@ -80,12 +80,14 @@ const getGroupAggregatedValue = (groupId, apiRef, aggregationRowsScope, aggregat
       groupId,
       field: aggregatedField // Added per user request in https://github.com/mui/mui-x/issues/6995#issuecomment-1327423455
     }, publicApi);
+    const formattedValue = aggregationFunction.valueFormatter ? aggregationFunction.valueFormatter(value, rowLookup[groupId], columnsLookup[aggregatedField], apiRef) : undefined;
 
     // Only add to groupAggregationLookup if position is not null
     if (position !== null) {
       groupAggregationLookup[aggregatedField] = {
         position,
-        value
+        value,
+        formattedValue
       };
     }
   }
@@ -149,7 +151,7 @@ const createAggregationLookup = ({
         aggregationLookup[groupNode.id] = getGroupAggregatedValueDataSource(groupNode.id, apiRef, aggregatedFields, position);
       }
     } else if (groupNode.children.length) {
-      const result = getGroupAggregatedValue(groupNode.id, apiRef, aggregationRowsScope, aggregatedFields, aggregationRules, position, applySorting, valueGetters, apiRef.current, groupAggregatedValuesLookup);
+      const result = getGroupAggregatedValue(groupNode.id, apiRef, aggregationRowsScope, aggregatedFields, aggregationRules, position, applySorting, valueGetters, apiRef.current, groupAggregatedValuesLookup, columnsLookup);
       // Always populate groupAggregatedValuesLookup for groups with children
       // This ensures parent groups can access child aggregated values even when position is null
       groupAggregatedValuesLookup.set(groupNode.id, result.aggregatedValues);

package/hooks/features/aggregation/gridAggregationInterfaces.d.ts

@@ -104,6 +104,7 @@ export type GridAggregationLookup = {
     [field: string]: {
       position: GridAggregationPosition;
       value: any;
+      formattedValue?: any;
     };
   };
 };

package/hooks/features/aggregation/gridAggregationSelectors.d.ts

@@ -25,4 +25,5 @@ export declare const gridCellAggregationResultSelector: (args_0: import("react")
 }) => {
   position: GridAggregationPosition;
   value: any;
+  formattedValue?: any;
 } | null;

package/hooks/features/aggregation/gridAggregationSelectors.js

@@ -24,6 +24,9 @@ const gridCellAggregationResultSelector = exports.gridCellAggregationResultSelec
   id,
   field
 }) => {
+  if (!aggregationLookup) {
+    return null;
+  }
   let cellAggregationPosition = null;
   const rowNode = rowTree[id];
   if (!rowNode) {

package/hooks/features/aggregation/useGridAggregation.js

@@ -9,6 +9,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useGridAggregation = exports.aggregationStateInitializer = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
+var _isObjectEmpty = require("@mui/x-internals/isObjectEmpty");
 var _xDataGridPro = require("@mui/x-data-grid-pro");
 var _internals = require("@mui/x-data-grid-pro/internals");
 var _gridAggregationSelectors = require("./gridAggregationSelectors");
@@ -54,6 +55,7 @@ const useGridAggregation = (apiRef, props) => {
     abortControllerRef.current = abortController;
     const aggregationRules = (0, _gridAggregationUtils.getAggregationRules)((0, _xDataGridPro.gridColumnLookupSelector)(apiRef), (0, _gridAggregationSelectors.gridAggregationModelSelector)(apiRef), props.aggregationFunctions, !!props.dataSource);
     const aggregatedFields = Object.keys(aggregationRules);
+    const currentAggregationLookup = (0, _gridAggregationSelectors.gridAggregationLookupSelector)(apiRef);
     const needsSorting = (0, _createAggregationLookup.shouldApplySorting)(aggregationRules, aggregatedFields);
     if (reason === 'sort' && !needsSorting) {
       // no need to re-apply aggregation on `sortedRowsSet` if sorting is not needed
@@ -123,6 +125,16 @@ const useGridAggregation = (apiRef, props) => {
       }, 0);
     };
     processChunk();
+
+    // processChunk() does nothing if there are no aggregated fields
+    // make sure that the lookup is empty in this case
+    if (aggregatedFields.length === 0 && !(0, _isObjectEmpty.isObjectEmpty)(currentAggregationLookup)) {
+      apiRef.current.setState(state => (0, _extends2.default)({}, state, {
+        aggregation: (0, _extends2.default)({}, state.aggregation, {
+          lookup: {}
+        })
+      }));
+    }
   }, [apiRef, props.getAggregationPosition, props.aggregationFunctions, props.aggregationRowsScope, props.dataSource]);
   React.useEffect(() => {
     return () => {

package/hooks/features/aggregation/wrapColumnWithAggregation.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { RefObject } from '@mui/x-internals/types';
 import { GridColDef } from '@mui/x-data-grid-pro';
-import { type GridBaseColDef } from '@mui/x-data-grid-pro/internals';
+import type { GridBaseColDef } from '@mui/x-data-grid-pro/internals';
 import { GridApiPremium } from "../../../models/gridApiPremium.js";
 import type { GridAggregationRule } from "./gridAggregationInterfaces.js";
 /**
@@ -59,4 +59,5 @@ export declare const unwrapColumnFromAggregation: (column: GridColDef) => GridBa
   groupingValueSetter?: import("../../../index.js").GridGroupingValueSetter<import("@mui/x-data-grid").GridValidRowModel> | undefined;
   pastedValueParser?: import("../../../index.js").GridPastedValueParser<import("@mui/x-data-grid").GridValidRowModel, any, any> | undefined;
   pivotable?: boolean;
+  chartable?: boolean;
 };