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

package/hooks/features/aggregation/wrapColumnWithAggregation.js

@@ -16,48 +16,6 @@ var _GridAggregationHeader = require("../../../components/GridAggregationHeader"
 var _gridPivotingSelectors = require("../pivoting/gridPivotingSelectors");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["aggregationWrappedProperties"];
-const getAggregationValueWrappedValueGetter = ({
-  value: valueGetter,
-  getCellAggregationResult
-}) => {
-  const wrappedValueGetter = (value, row, column, apiRef) => {
-    const rowId = (0, _xDataGridPro.gridRowIdSelector)(apiRef, row);
-    const cellAggregationResult = rowId ? getCellAggregationResult(rowId, column.field) : null;
-    if (cellAggregationResult != null) {
-      return cellAggregationResult?.value ?? null;
-    }
-    if (valueGetter) {
-      return valueGetter(value, row, column, apiRef);
-    }
-    return row[column.field];
-  };
-  return wrappedValueGetter;
-};
-const getAggregationValueWrappedValueFormatter = ({
-  value: valueFormatter,
-  aggregationRule,
-  getCellAggregationResult
-}) => {
-  // If neither the inline aggregation function nor the footer aggregation function have a custom value formatter,
-  // Then we don't wrap the column value formatter
-  if (!aggregationRule.aggregationFunction.valueFormatter) {
-    return valueFormatter;
-  }
-  const wrappedValueFormatter = (value, row, column, apiRef) => {
-    const rowId = (0, _xDataGridPro.gridRowIdSelector)(apiRef, row);
-    if (rowId != null) {
-      const cellAggregationResult = getCellAggregationResult(rowId, column.field);
-      if (cellAggregationResult != null) {
-        return aggregationRule.aggregationFunction.valueFormatter?.(value, row, column, apiRef);
-      }
-    }
-    if (valueFormatter) {
-      return valueFormatter(value, row, column, apiRef);
-    }
-    return value;
-  };
-  return wrappedValueFormatter;
-};
 const getAggregationValueWrappedRenderCell = ({
   value: renderCell,
   aggregationRule,
@@ -169,8 +127,6 @@ const wrapColumnWithAggregationValue = (column, aggregationRule, apiRef) => {
       });
     }
   };
-  wrapColumnProperty('valueGetter', getAggregationValueWrappedValueGetter);
-  wrapColumnProperty('valueFormatter', getAggregationValueWrappedValueFormatter);
   wrapColumnProperty('renderCell', getAggregationValueWrappedRenderCell);
   wrapColumnProperty('renderHeader', getWrappedRenderHeader);
   if (!didWrapSomeProperty) {

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

@@ -0,0 +1,65 @@
+import { GridColDef } from '@mui/x-data-grid-pro';
+import type { ChartState } from "../../../models/gridChartsIntegration.js";
+export type GridChartsIntegrationSection = 'dimensions' | 'values' | null;
+export type GridChartsIntegrationItem = {
+  field: GridColDef['field'];
+  hidden?: boolean;
+};
+export interface GridChartsIntegrationState {
+  activeChartId: string;
+  charts: Record<string, {
+    dimensions: GridChartsIntegrationItem[];
+    values: GridChartsIntegrationItem[];
+  }>;
+}
+export interface GridChartsIntegrationInitialState {
+  activeChartId?: string;
+  charts?: Record<string, {
+    dimensions?: GridChartsIntegrationItem[] | GridColDef['field'][];
+    values?: GridChartsIntegrationItem[] | GridColDef['field'][];
+    chartType?: ChartState['type'];
+    configuration?: ChartState['configuration'];
+  }>;
+}
+export interface GridChartsIntegrationApi {
+  /**
+   * Sets whether the charts side panel is open.
+   * @param {boolean | ((prev: boolean) => boolean)} open - The new value of the charts side panel open state.
+   */
+  setChartsPanelOpen: (open: boolean | ((prev: boolean) => boolean)) => void;
+  /**
+   * Sets the active chart id.
+   * @param {string} chartId - The id of the chart to set as active.
+   */
+  setActiveChartId: (chartId: string) => void;
+  /**
+   * Sets the chart type for the active chart.
+   * @param {string} chartId - The id of the chart to set the type for.
+   * @param {string} type - The new type of the chart.
+   */
+  setChartType: (chartId: string, type: string) => void;
+  /**
+   * Sets the synchronization state for a chart.
+   * @param {string} chartId - The id of the chart to set the synchronization state for.
+   * @param {boolean} synced - The new synchronization state.
+   */
+  setChartSynchronizationState: (chartId: string, synced: boolean) => void;
+  /**
+   * Updates the dimensions data selection for the charts integration.
+   * @param {string} chartId - The id of the chart to update the dimensions for.
+   * @param {GridChartsIntegrationItem[] | ((prev: GridChartsIntegrationItem[]) => GridChartsIntegrationItem[])} dimensions - The new dimensions selection or a function that returns the new dimensions selection.
+   */
+  updateChartDimensionsData: (chartId: string, dimensions: GridChartsIntegrationItem[] | ((prev: GridChartsIntegrationItem[]) => GridChartsIntegrationItem[])) => void;
+  /**
+   * Updates the values data selection for the charts integration.
+   * @param {string} chartId - The id of the chart to update the values for.
+   * @param {GridChartsIntegrationItem[] | ((prev: GridChartsIntegrationItem[]) => GridChartsIntegrationItem[])} values - The new values selection or a function that returns the new values selection.
+   */
+  updateChartValuesData: (chartId: string, values: GridChartsIntegrationItem[] | ((prev: GridChartsIntegrationItem[]) => GridChartsIntegrationItem[])) => void;
+}
+export interface GridChartsIntegrationPrivateApi {
+  chartsIntegration: {
+    updateDataReference: (field: string, originSection: GridChartsIntegrationSection, targetSection: GridChartsIntegrationSection, targetField?: string, placementRelativeToTargetField?: 'top' | 'bottom') => void;
+    getColumnName: (field: string) => string;
+  };
+}

package/hooks/features/chartsIntegration/gridChartsIntegrationInterfaces.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -0,0 +1,17 @@
+import { GridColumnLookup } from '@mui/x-data-grid';
+import { GridStatePremium } from "../../../models/gridStatePremium.js";
+export declare const gridChartsIntegrationActiveChartIdSelector: (args_0: import("react").RefObject<{
+  state: GridStatePremium;
+} | null>) => string;
+export declare const gridChartsPanelOpenSelector: (args_0: import("react").RefObject<{
+  state: GridStatePremium;
+} | null>) => boolean;
+export declare const gridChartableColumnsSelector: (args_0: import("react").RefObject<{
+  state: GridStatePremium;
+} | null>) => GridColumnLookup;
+export declare const gridChartsDimensionsSelector: (args_0: import("react").RefObject<{
+  state: GridStatePremium;
+} | null>, chartId: any) => import("./gridChartsIntegrationInterfaces.js").GridChartsIntegrationItem[];
+export declare const gridChartsValuesSelector: (args_0: import("react").RefObject<{
+  state: GridStatePremium;
+} | null>, chartId: any) => import("./gridChartsIntegrationInterfaces.js").GridChartsIntegrationItem[];

package/hooks/features/chartsIntegration/gridChartsIntegrationSelectors.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.gridChartsValuesSelector = exports.gridChartsPanelOpenSelector = 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 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);
+  if (pivotActive) {
+    const pivotColumns = pivotModel.columns.filter(column => column.hidden !== true).map(column => column.field);
+    const pivotValues = pivotModel.values.filter(value => value.hidden !== true).map(value => value.field);
+    // pivot columns are not visualized
+    // once the columns are set, value fields are created dynamically. those fields remain chartable, but we remove the initial value columns
+    if (pivotColumns.length > 0) {
+      chartableColumns = chartableColumns.filter(column => !pivotColumns.includes(column.field) && !pivotValues.includes(column.field));
+    }
+  }
+  return chartableColumns.reduce((acc, column) => {
+    acc[column.field] = column;
+    return acc;
+  }, {});
+});
+const gridChartsDimensionsSelector = exports.gridChartsDimensionsSelector = (0, _internals.createSelector)(gridChartsIntegrationStateSelector, (chartsIntegration, chartId) => chartsIntegration.charts[chartId]?.dimensions || []);
+const gridChartsValuesSelector = exports.gridChartsValuesSelector = (0, _internals.createSelector)(gridChartsIntegrationStateSelector, (chartsIntegration, chartId) => chartsIntegration.charts[chartId]?.values || []);

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

@@ -0,0 +1,8 @@
+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 { ChartState } from "../../../models/gridChartsIntegration.js";
+export declare const chartsIntegrationStateInitializer: GridStateInitializer<Pick<DataGridPremiumProcessedProps, 'chartsIntegration' | 'initialState' | 'activeChartId' | 'rowGroupingModel' | 'pivotModel' | 'experimentalFeatures'>, GridPrivateApiPremium>;
+export declare const EMPTY_CHART_INTEGRATION_CONTEXT_STATE: ChartState;
+export declare const useGridChartsIntegration: (apiRef: RefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "chartsIntegration" | "activeChartId" | "onActiveChartIdChange" | "initialState" | "slots" | "slotProps" | "aggregationFunctions" | "dataSource" | "experimentalFeatures">) => void;