@mui/x-data-grid-premium 5.13.1 → 5.14.0

package/modern/components/GridFooterCell.js

@@ -0,0 +1,51 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["formattedValue", "colDef", "cellMode", "row", "api", "getValue", "id", "value", "rowNode", "field", "focusElementRef", "hasFocus", "tabIndex", "isEditable"];
+import * as React from 'react';
+import { getDataGridUtilityClass } from '@mui/x-data-grid';
+import { styled } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
+import { useGridRootProps } from '../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+const GridFooterCellRoot = styled(Box, {
+  name: 'MuiDataGrid',
+  slot: 'FooterCell',
+  overridesResolver: (_, styles) => styles.footerCell
+})(({
+  theme
+}) => ({
+  fontWeight: theme.typography.fontWeightMedium,
+  color: theme.palette.primary.dark
+}));
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['footerCell']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+
+const GridFooterCell = props => {
+  const {
+    formattedValue
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
+
+  const rootProps = useGridRootProps();
+  const ownerState = {
+    classes: rootProps.classes
+  };
+  const classes = useUtilityClasses(ownerState);
+  return /*#__PURE__*/_jsx(GridFooterCellRoot, _extends({
+    ownerState: ownerState,
+    className: classes.root
+  }, other, {
+    children: formattedValue
+  }));
+};
+
+export { GridFooterCell };

package/modern/components/GridGroupingColumnFooterCell.js

@@ -0,0 +1,29 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useGridRootProps } from '../hooks/utils/useGridRootProps';
+import { GridFooterCell } from './GridFooterCell';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const GridGroupingColumnFooterCell = props => {
+  const {
+    rowNode
+  } = props;
+  const rootProps = useGridRootProps();
+  let marginLeft;
+
+  if (rowNode.parent == null) {
+    marginLeft = 0;
+  } else if (rootProps.rowGroupingColumnMode === 'multiple') {
+    marginLeft = 2;
+  } else {
+    marginLeft = rowNode.depth * 2;
+  }
+
+  return /*#__PURE__*/_jsx(GridFooterCell, _extends({
+    sx: {
+      ml: marginLeft
+    }
+  }, props));
+};
+
+export { GridGroupingColumnFooterCell };

package/modern/hooks/features/aggregation/createAggregationLookup.js

@@ -0,0 +1,122 @@
+import { gridColumnLookupSelector, gridFilteredRowsLookupSelector, gridRowIdsSelector, gridRowTreeSelector } from '@mui/x-data-grid-pro';
+import { getAggregationRules } from './gridAggregationUtils';
+import { gridAggregationModelSelector } from './gridAggregationSelectors';
+
+const getAggregationCellValue = ({
+  apiRef,
+  groupId,
+  field,
+  aggregationFunction,
+  aggregationRowsScope
+}) => {
+  const rowTree = gridRowTreeSelector(apiRef);
+  const filteredRowsLookup = gridFilteredRowsLookupSelector(apiRef);
+  let rowIds; // TODO: Add custom root id
+
+  if (groupId === '') {
+    rowIds = gridRowIdsSelector(apiRef).filter(rowId => !rowTree[rowId].isAutoGenerated);
+  } else {
+    rowIds = apiRef.current.getRowGroupChildren({
+      groupId
+    });
+  }
+
+  const values = [];
+  rowIds.forEach(rowId => {
+    if (aggregationRowsScope === 'filtered' && filteredRowsLookup[rowId] === false) {
+      return;
+    }
+
+    values.push(apiRef.current.getCellValue(rowId, field));
+  });
+  return aggregationFunction.apply({
+    values
+  });
+};
+
+const getGroupAggregatedValue = ({
+  groupId,
+  apiRef,
+  aggregationRowsScope,
+  aggregatedFields,
+  aggregationRules,
+  position
+}) => {
+  const groupAggregationLookup = {};
+
+  for (let j = 0; j < aggregatedFields.length; j += 1) {
+    const aggregatedField = aggregatedFields[j];
+    const columnAggregationRules = aggregationRules[aggregatedField];
+    groupAggregationLookup[aggregatedField] = {
+      position,
+      value: getAggregationCellValue({
+        apiRef,
+        groupId,
+        field: aggregatedField,
+        aggregationFunction: columnAggregationRules.aggregationFunction,
+        aggregationRowsScope
+      })
+    };
+  }
+
+  return groupAggregationLookup;
+};
+
+export const createAggregationLookup = ({
+  apiRef,
+  aggregationFunctions,
+  aggregationRowsScope,
+  getAggregationPosition
+}) => {
+  const aggregationRules = getAggregationRules({
+    columnsLookup: gridColumnLookupSelector(apiRef),
+    aggregationModel: gridAggregationModelSelector(apiRef),
+    aggregationFunctions
+  });
+  const aggregatedFields = Object.keys(aggregationRules);
+
+  if (aggregatedFields.length === 0) {
+    return {};
+  }
+
+  const aggregationLookup = {};
+  const rowIds = gridRowIdsSelector(apiRef);
+  const rowTree = gridRowTreeSelector(apiRef);
+
+  for (let i = 0; i < rowIds.length; i += 1) {
+    const rowId = rowIds[i];
+    const node = rowTree[rowId];
+    const hasChildren = node.children?.some(childId => (rowTree[childId].position ?? 'body') === 'body');
+
+    if (hasChildren) {
+      const position = getAggregationPosition(node);
+
+      if (position != null) {
+        aggregationLookup[rowId] = getGroupAggregatedValue({
+          groupId: rowId,
+          apiRef,
+          aggregatedFields,
+          aggregationRowsScope,
+          aggregationRules,
+          position
+        });
+      }
+    }
+  } // TODO: Add custom root id
+
+
+  const position = getAggregationPosition(null);
+
+  if (position != null) {
+    aggregationLookup[''] = getGroupAggregatedValue({
+      groupId: '',
+      apiRef,
+      aggregatedFields,
+      aggregationRowsScope,
+      aggregationRules,
+      position
+    });
+  }
+
+  return aggregationLookup;
+};

package/modern/hooks/features/aggregation/gridAggregationFunctions.js

@@ -0,0 +1,96 @@
+import { isNumber } from '@mui/x-data-grid-pro/internals';
+const sumAgg = {
+  apply: ({
+    values
+  }) => {
+    let sum = 0;
+
+    for (let i = 0; i < values.length; i += 1) {
+      const value = values[i];
+
+      if (value != null) {
+        sum += value;
+      }
+    }
+
+    return sum;
+  },
+  columnTypes: ['number']
+};
+const avgAgg = {
+  apply: params => {
+    if (params.values.length === 0) {
+      return null;
+    }
+
+    const sum = sumAgg.apply(params);
+    return sum / params.values.length;
+  },
+  columnTypes: ['number']
+};
+const minAgg = {
+  apply: ({
+    values
+  }) => {
+    if (values.length === 0) {
+      return null;
+    }
+
+    let min = +Infinity;
+
+    for (let i = 0; i < values.length; i += 1) {
+      const value = values[i];
+
+      if (value != null && value < min) {
+        min = value;
+      }
+    }
+
+    return min;
+  },
+  columnTypes: ['number', 'date', 'dateTime']
+};
+const maxAgg = {
+  apply: ({
+    values
+  }) => {
+    if (values.length === 0) {
+      return null;
+    }
+
+    let max = -Infinity;
+
+    for (let i = 0; i < values.length; i += 1) {
+      const value = values[i];
+
+      if (value != null && value > max) {
+        max = value;
+      }
+    }
+
+    return max;
+  },
+  columnTypes: ['number', 'date', 'dateTime']
+};
+const sizeAgg = {
+  apply: ({
+    values
+  }) => {
+    return values.length;
+  },
+  valueFormatter: params => {
+    if (params.value == null || !isNumber(params.value)) {
+      return params.value;
+    }
+
+    return params.value.toLocaleString();
+  },
+  hasCellUnit: false
+};
+export const PRIVATE_GRID_AGGREGATION_FUNCTIONS = {
+  sum: sumAgg,
+  avg: avgAgg,
+  min: minAgg,
+  max: maxAgg,
+  size: sizeAgg
+};

package/modern/hooks/features/aggregation/gridAggregationInterfaces.js

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

package/modern/hooks/features/aggregation/gridAggregationSelectors.js

@@ -0,0 +1,5 @@
+import { createSelector } from '@mui/x-data-grid-pro/internals';
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const private_gridAggregationStateSelector = state => state.private_aggregation;
+export const gridAggregationModelSelector = createSelector(private_gridAggregationStateSelector, aggregationState => aggregationState.model);
+export const gridAggregationLookupSelector = createSelector(private_gridAggregationStateSelector, aggregationState => aggregationState.lookup);

package/modern/hooks/features/aggregation/gridAggregationUtils.js

@@ -0,0 +1,175 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { capitalize } from '@mui/material';
+import { isDeepEqual } from '@mui/x-data-grid-pro/internals';
+export const PRIVATE_GRID_AGGREGATION_ROOT_FOOTER_ROW_ID = 'auto-generated-group-footer-root'; // eslint-disable-next-line @typescript-eslint/naming-convention
+
+export const private_getAggregationFooterRowIdFromGroupId = groupId => {
+  if (groupId == null) {
+    return PRIVATE_GRID_AGGREGATION_ROOT_FOOTER_ROW_ID;
+  }
+
+  return `auto-generated-group-footer-${groupId}`;
+};
+export const canColumnHaveAggregationFunction = ({
+  column,
+  aggregationFunctionName,
+  aggregationFunction
+}) => {
+  if (!column || !column.private_aggregable) {
+    return false;
+  }
+
+  if (!aggregationFunction) {
+    return false;
+  }
+
+  if (column.private_availableAggregationFunctions != null) {
+    return column.private_availableAggregationFunctions.includes(aggregationFunctionName);
+  }
+
+  if (!aggregationFunction.columnTypes) {
+    return true;
+  }
+
+  return aggregationFunction.columnTypes.includes(column.type);
+};
+export const getAvailableAggregationFunctions = ({
+  aggregationFunctions,
+  column
+}) => Object.keys(aggregationFunctions).filter(aggregationFunctionName => canColumnHaveAggregationFunction({
+  column,
+  aggregationFunctionName,
+  aggregationFunction: aggregationFunctions[aggregationFunctionName]
+}));
+export const mergeStateWithAggregationModel = aggregationModel => state => _extends({}, state, {
+  private_aggregation: _extends({}, state.private_aggregation, {
+    model: aggregationModel
+  })
+});
+export const getAggregationRules = ({
+  columnsLookup,
+  aggregationModel,
+  aggregationFunctions
+}) => {
+  const aggregationRules = {};
+  Object.entries(aggregationModel).forEach(([field, columnItem]) => {
+    if (columnsLookup[field] && canColumnHaveAggregationFunction({
+      column: columnsLookup[field],
+      aggregationFunctionName: columnItem,
+      aggregationFunction: aggregationFunctions[columnItem]
+    })) {
+      aggregationRules[field] = {
+        aggregationFunctionName: columnItem,
+        aggregationFunction: aggregationFunctions[columnItem]
+      };
+    }
+  });
+  return aggregationRules;
+};
+/**
+ * Add a footer for each group that has at least one column with an aggregated value.
+ */
+
+export const addFooterRows = ({
+  groupingParams,
+  aggregationRules,
+  getAggregationPosition
+}) => {
+  if (Object.keys(aggregationRules).length === 0) {
+    return groupingParams;
+  }
+
+  const ids = [...groupingParams.ids];
+
+  const idRowsLookup = _extends({}, groupingParams.idRowsLookup);
+
+  const tree = _extends({}, groupingParams.tree);
+
+  const addGroupFooter = groupNode => {
+    const groupId = groupNode?.id ?? null;
+
+    if (getAggregationPosition(groupNode) !== 'footer') {
+      return;
+    }
+
+    const footerId = private_getAggregationFooterRowIdFromGroupId(groupId);
+    ids.push(footerId);
+    idRowsLookup[footerId] = {};
+    tree[footerId] = {
+      id: footerId,
+      isAutoGenerated: true,
+      parent: groupId,
+      depth: groupNode ? groupNode.depth + 1 : 0,
+      groupingKey: null,
+      groupingField: null,
+      position: 'footer'
+    };
+
+    if (groupId != null) {
+      tree[groupId] = _extends({}, tree[groupId], {
+        footerId
+      });
+    }
+  };
+
+  addGroupFooter(null); // If the tree is flat, we don't need to loop through the rows
+
+  if (groupingParams.treeDepth > 1) {
+    groupingParams.ids.forEach(parentId => {
+      const parentNode = tree[parentId];
+
+      if (parentNode.depth === groupingParams.treeDepth - 1) {
+        return;
+      }
+
+      addGroupFooter(parentNode);
+    });
+  }
+
+  return _extends({}, groupingParams, {
+    ids,
+    idRowsLookup,
+    tree
+  });
+};
+/**
+ * Compares two sets of aggregation rules to determine if they are equal or not.
+ */
+
+export const hasAggregationRulesChanged = (previousValue, newValue) => {
+  const previousFields = Object.keys(previousValue ?? {});
+  const newFields = Object.keys(newValue);
+
+  if (!isDeepEqual(previousFields, newFields)) {
+    return true;
+  }
+
+  return newFields.some(field => {
+    const previousRule = previousValue?.[field];
+    const newRule = newValue[field];
+
+    if (previousRule?.aggregationFunction !== newRule?.aggregationFunction) {
+      return true;
+    }
+
+    if (previousRule?.aggregationFunctionName !== newRule?.aggregationFunctionName) {
+      return true;
+    }
+
+    return false;
+  });
+};
+export const getAggregationFunctionLabel = ({
+  apiRef,
+  aggregationRule
+}) => {
+  if (aggregationRule.aggregationFunction.label != null) {
+    return aggregationRule.aggregationFunction.label;
+  }
+
+  try {
+    return apiRef.current.getLocaleText(`aggregationFunctionLabel${capitalize(aggregationRule.aggregationFunctionName)}`);
+  } catch (e) {
+    return aggregationRule.aggregationFunctionName;
+  }
+};

package/modern/hooks/features/aggregation/index.js

@@ -0,0 +1,4 @@
+export * from './gridAggregationInterfaces';
+export * from './gridAggregationSelectors';
+export * from './gridAggregationFunctions';
+export { PRIVATE_GRID_AGGREGATION_ROOT_FOOTER_ROW_ID, private_getAggregationFooterRowIdFromGroupId } from './gridAggregationUtils';

package/modern/hooks/features/aggregation/useGridAggregation.js

@@ -0,0 +1,92 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { gridColumnLookupSelector, useGridApiEventHandler, useGridApiMethod } from '@mui/x-data-grid-pro';
+import { gridAggregationModelSelector } from './gridAggregationSelectors';
+import { getAggregationRules, mergeStateWithAggregationModel, hasAggregationRulesChanged } from './gridAggregationUtils';
+import { createAggregationLookup } from './createAggregationLookup';
+export const aggregationStateInitializer = (state, props, apiRef) => {
+  apiRef.current.unstable_caches.aggregation = {
+    rulesOnLastColumnHydration: {},
+    rulesOnLastRowHydration: {}
+  };
+  return _extends({}, state, {
+    private_aggregation: {
+      model: props.private_aggregationModel ?? props.initialState?.private_aggregation?.model ?? {}
+    }
+  });
+};
+export const useGridAggregation = (apiRef, props) => {
+  apiRef.current.unstable_registerControlState({
+    stateId: 'aggregation',
+    propModel: props.private_aggregationModel,
+    propOnChange: props.private_onAggregationModelChange,
+    stateSelector: gridAggregationModelSelector,
+    changeEvent: 'aggregationModelChange'
+  });
+  /**
+   * API METHODS
+   */
+
+  const setAggregationModel = React.useCallback(model => {
+    const currentModel = gridAggregationModelSelector(apiRef);
+
+    if (currentModel !== model) {
+      apiRef.current.setState(mergeStateWithAggregationModel(model));
+      apiRef.current.forceUpdate();
+    }
+  }, [apiRef]);
+  const applyAggregation = React.useCallback(() => {
+    const aggregationLookup = createAggregationLookup({
+      apiRef,
+      getAggregationPosition: props.private_getAggregationPosition,
+      aggregationFunctions: props.private_aggregationFunctions,
+      aggregationRowsScope: props.private_aggregationRowsScope
+    });
+    apiRef.current.setState(state => _extends({}, state, {
+      private_aggregation: _extends({}, state.private_aggregation, {
+        lookup: aggregationLookup
+      })
+    }));
+  }, [apiRef, props.private_getAggregationPosition, props.private_aggregationFunctions, props.private_aggregationRowsScope]);
+  const aggregationApi = {
+    private_setAggregationModel: setAggregationModel
+  };
+  useGridApiMethod(apiRef, aggregationApi, 'GridAggregationApi');
+  /**
+   * EVENTS
+   */
+
+  const checkAggregationRulesDiff = React.useCallback(() => {
+    const {
+      rulesOnLastRowHydration,
+      rulesOnLastColumnHydration
+    } = apiRef.current.unstable_caches.aggregation;
+    const aggregationRules = props.private_disableAggregation ? {} : getAggregationRules({
+      columnsLookup: gridColumnLookupSelector(apiRef),
+      aggregationModel: gridAggregationModelSelector(apiRef),
+      aggregationFunctions: props.private_aggregationFunctions
+    }); // Re-apply the row hydration to add / remove the aggregation footers
+
+    if (hasAggregationRulesChanged(rulesOnLastRowHydration, aggregationRules)) {
+      apiRef.current.unstable_requestPipeProcessorsApplication('hydrateRows');
+      applyAggregation();
+    } // Re-apply the column hydration to wrap / unwrap the aggregated columns
+
+
+    if (hasAggregationRulesChanged(rulesOnLastColumnHydration, aggregationRules)) {
+      apiRef.current.unstable_requestPipeProcessorsApplication('hydrateColumns');
+    }
+  }, [apiRef, applyAggregation, props.private_aggregationFunctions, props.private_disableAggregation]);
+  useGridApiEventHandler(apiRef, 'aggregationModelChange', checkAggregationRulesDiff);
+  useGridApiEventHandler(apiRef, 'columnsChange', checkAggregationRulesDiff);
+  useGridApiEventHandler(apiRef, 'filteredRowsSet', applyAggregation);
+  /**
+   * EFFECTS
+   */
+
+  React.useEffect(() => {
+    if (props.private_aggregationModel !== undefined) {
+      apiRef.current.private_setAggregationModel(props.private_aggregationModel);
+    }
+  }, [apiRef, props.private_aggregationModel]);
+};