@mui/x-data-grid-generator 7.20.0 → 7.22.0

package/node/hooks/serverUtils.js

@@ -4,15 +4,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.processTreeDataRows = exports.loadServerRows = exports.disableDelay = exports.DEFAULT_SERVER_OPTIONS = exports.DEFAULT_DATASET_OPTIONS = void 0;
+exports.processTreeDataRows = exports.processRowGroupingRows = exports.loadServerRows = exports.disableDelay = exports.DEFAULT_SERVER_OPTIONS = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _xDataGridPro = require("@mui/x-data-grid-pro");
 var _randomGenerator = require("../services/random-generator");
-const DEFAULT_DATASET_OPTIONS = exports.DEFAULT_DATASET_OPTIONS = {
-  dataSet: 'Commodity',
-  rowLength: 100,
-  maxColumns: 6
-};
 const disableDelay = exports.disableDelay = typeof DISABLE_CHANCE_RANDOM !== 'undefined' && DISABLE_CHANCE_RANDOM;
 const DEFAULT_SERVER_OPTIONS = exports.DEFAULT_SERVER_OPTIONS = {
   minDelay: disableDelay ? 0 : 100,
@@ -221,8 +216,7 @@ const loadServerRows = (rows, queryOptions, serverOptions, columnsWithDefaultCol
   });
 };
 exports.loadServerRows = loadServerRows;
-const findTreeDataRowChildren = (allRows, parentPath, pathKey = 'path', depth = 1 // the depth of the children to find relative to parentDepth, `-1` to find all
-) => {
+const findTreeDataRowChildren = (allRows, parentPath, pathKey = 'path', depth = 1, rowQualifier) => {
   const parentDepth = parentPath.length;
   const children = [];
   for (let i = 0; i < allRows.length; i += 1) {
@@ -232,7 +226,9 @@ const findTreeDataRowChildren = (allRows, parentPath, pathKey = 'path', depth =
       continue;
     }
     if ((depth < 0 && rowPath.length > parentDepth || rowPath.length === parentDepth + depth) && parentPath.every((value, index) => value === rowPath[index])) {
-      children.push(row);
+      if (!rowQualifier || rowQualifier(row)) {
+        children.push(row);
+      }
     }
   }
   return children;
@@ -295,7 +291,7 @@ const getTreeDataFilteredRows = (rows, filterModel, columnsWithDefaultColDef) =>
 };
 
 /**
- * Simulates server data loading
+ * Simulates server data for tree-data feature
  */
 const processTreeDataRows = (rows, queryOptions, serverOptions, columnsWithDefaultColDef) => {
   const {
@@ -351,4 +347,118 @@ const processTreeDataRows = (rows, queryOptions, serverOptions, columnsWithDefau
     }, delay); // simulate network latency
   });
 };
-exports.processTreeDataRows = processTreeDataRows;
+
+/**
+ * Simulates server data for row grouping feature
+ */
+exports.processTreeDataRows = processTreeDataRows;
+const processRowGroupingRows = (rows, queryOptions, serverOptions, columnsWithDefaultColDef) => {
+  const {
+    minDelay = 100,
+    maxDelay = 300
+  } = serverOptions;
+  const pathKey = 'path';
+  if (maxDelay < minDelay) {
+    throw new Error('serverOptions.minDelay is larger than serverOptions.maxDelay ');
+  }
+  if (queryOptions.groupKeys == null) {
+    throw new Error('serverOptions.groupKeys must be defined to compute row grouping data');
+  }
+  if (queryOptions.groupFields == null) {
+    throw new Error('serverOptions.groupFields must be defined to compute row grouping data');
+  }
+  const delay = (0, _randomGenerator.randomInt)(minDelay, maxDelay);
+  const pathsToAutogenerate = new Set();
+  let rowsWithPaths = rows;
+  const rowsWithMissingGroups = [];
+
+  // add paths and generate parent rows based on `groupFields`
+  const groupFields = queryOptions.groupFields;
+  if (groupFields.length > 0) {
+    rowsWithPaths = rows.reduce((acc, row) => {
+      const partialPath = groupFields.map(field => String(row[field]));
+      for (let index = 0; index < partialPath.length; index += 1) {
+        const value = partialPath[index];
+        if (value === undefined) {
+          if (index === 0) {
+            rowsWithMissingGroups.push((0, _extends2.default)({}, row, {
+              group: false
+            }));
+          }
+          return acc;
+        }
+        const parentPath = partialPath.slice(0, index + 1);
+        const strigifiedPath = parentPath.join(',');
+        if (!pathsToAutogenerate.has(strigifiedPath)) {
+          pathsToAutogenerate.add(strigifiedPath);
+        }
+      }
+      acc.push((0, _extends2.default)({}, row, {
+        path: [...partialPath, '']
+      }));
+      return acc;
+    }, []);
+  } else {
+    rowsWithPaths = rows.map(row => (0, _extends2.default)({}, row, {
+      path: ['']
+    }));
+  }
+  const autogeneratedRows = Array.from(pathsToAutogenerate).map(path => {
+    const pathArray = path.split(',');
+    return {
+      id: `auto-generated-parent-${pathArray.join('-')}`,
+      path: pathArray.slice(0, pathArray.length),
+      group: pathArray.slice(-1)[0]
+    };
+  });
+
+  // apply plain filtering
+  const filteredRows = getTreeDataFilteredRows([...autogeneratedRows, ...rowsWithPaths, ...rowsWithMissingGroups], queryOptions.filterModel, columnsWithDefaultColDef);
+
+  // get root row count
+  const rootRows = findTreeDataRowChildren(filteredRows, []);
+  const rootRowCount = rootRows.length;
+  let filteredRowsWithMissingGroups = [];
+  let childRows = rootRows;
+  if (queryOptions.groupKeys.length === 0) {
+    filteredRowsWithMissingGroups = filteredRows.filter(({
+      group
+    }) => group === false);
+  } else {
+    childRows = findTreeDataRowChildren(filteredRows, queryOptions.groupKeys);
+  }
+  let childRowsWithDescendantCounts = childRows.map(row => {
+    const descendants = findTreeDataRowChildren(filteredRows, row[pathKey], pathKey, -1, ({
+      id
+    }) => typeof id !== 'string' || !id.startsWith('auto-generated-parent-'));
+    const descendantCount = descendants.length;
+    return (0, _extends2.default)({}, row, {
+      descendantCount
+    });
+  });
+  if (queryOptions.sortModel) {
+    const rowComparator = getRowComparator(queryOptions.sortModel, columnsWithDefaultColDef);
+    const sortedMissingGroups = [...filteredRowsWithMissingGroups].sort(rowComparator);
+    const sortedChildRows = [...childRowsWithDescendantCounts].sort(rowComparator);
+    childRowsWithDescendantCounts = [...sortedMissingGroups, ...sortedChildRows];
+  }
+  if (queryOptions.paginationModel && queryOptions.groupKeys.length === 0) {
+    // Only paginate root rows, grid should refetch root rows when `paginationModel` updates
+    const {
+      pageSize,
+      page
+    } = queryOptions.paginationModel;
+    if (pageSize < childRowsWithDescendantCounts.length) {
+      childRowsWithDescendantCounts = childRowsWithDescendantCounts.slice(page * pageSize, (page + 1) * pageSize);
+    }
+  }
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve({
+        rows: childRowsWithDescendantCounts,
+        rootRowCount
+      });
+    }, delay); // simulate network latency
+  });
+};
+exports.processRowGroupingRows = processRowGroupingRows;

package/node/hooks/useMockServer.js

@@ -11,15 +11,48 @@ var React = _interopRequireWildcard(require("react"));
 var _lruCache = require("lru-cache");
 var _xDataGridPro = require("@mui/x-data-grid-pro");
 var _useDemoData = require("./useDemoData");
+var _commodities = require("../columns/commodities.columns");
+var _employees = require("../columns/employees.columns");
 var _realDataService = require("../services/real-data-service");
 var _treeDataGenerator = require("../services/tree-data-generator");
 var _serverUtils = require("./serverUtils");
 var _services = require("../services");
+var _useMovieData = require("./useMovieData");
 const dataCache = new _lruCache.LRUCache({
   max: 10,
   ttl: 60 * 5 * 1e3 // 5 minutes
 });
 const BASE_URL = exports.BASE_URL = 'https://mui.com/x/api/data-grid';
+const GET_DEFAULT_DATASET_OPTIONS = isRowGrouping => ({
+  dataSet: isRowGrouping ? 'Movies' : 'Commodity',
+  rowLength: isRowGrouping ? (0, _useMovieData.getMovieRows)().length : 100,
+  maxColumns: 6
+});
+const getColumnsFromOptions = options => {
+  let columns;
+  switch (options.dataSet) {
+    case 'Commodity':
+      columns = (0, _commodities.getCommodityColumns)(options.editable);
+      break;
+    case 'Employee':
+      columns = (0, _employees.getEmployeeColumns)();
+      break;
+    case 'Movies':
+      columns = (0, _useMovieData.getMovieColumns)();
+      break;
+    default:
+      throw new Error('Unknown dataset');
+  }
+  if (options.visibleFields) {
+    columns = columns.map(col => options.visibleFields?.includes(col.field) ? col : (0, _extends2.default)({}, col, {
+      hide: true
+    }));
+  }
+  if (options.maxColumns) {
+    columns = columns.slice(0, options.maxColumns);
+  }
+  return columns;
+};
 function decodeParams(url) {
   const params = new URL(url).searchParams;
   const decodedParams = {};
@@ -50,6 +83,14 @@ const getInitialState = (columns, groupingField) => {
   };
 };
 const defaultColDef = (0, _xDataGridPro.getGridDefaultColumnTypes)();
+function sendEmptyResponse() {
+  return new Promise(resolve => {
+    resolve({
+      rows: [],
+      rowCount: 0
+    });
+  });
+}
 const useMockServer = (dataSetOptions, serverOptions, shouldRequestsFail) => {
   const [data, setData] = React.useState();
   const [index, setIndex] = React.useState(0);
@@ -59,9 +100,11 @@ const useMockServer = (dataSetOptions, serverOptions, shouldRequestsFail) => {
       shouldRequestsFailRef.current = shouldRequestsFail;
     }
   }, [shouldRequestsFail]);
-  const options = (0, _extends2.default)({}, _serverUtils.DEFAULT_DATASET_OPTIONS, dataSetOptions);
+  const isRowGrouping = dataSetOptions?.rowGrouping ?? false;
+  const options = (0, _extends2.default)({}, GET_DEFAULT_DATASET_OPTIONS(isRowGrouping), dataSetOptions);
+  const isTreeData = options.treeData?.groupingField != null;
   const columns = React.useMemo(() => {
-    return (0, _useDemoData.getColumnsFromOptions)({
+    return getColumnsFromOptions({
       dataSet: options.dataSet,
       editable: options.editable,
       maxColumns: options.maxColumns,
@@ -70,7 +113,6 @@ const useMockServer = (dataSetOptions, serverOptions, shouldRequestsFail) => {
   }, [options.dataSet, options.editable, options.maxColumns, options.visibleFields]);
   const initialState = React.useMemo(() => getInitialState(columns, options.treeData?.groupingField), [columns, options.treeData?.groupingField]);
   const columnsWithDefaultColDef = React.useMemo(() => columns.map(column => (0, _extends2.default)({}, defaultColDef[column.type || 'string'], column)), [columns]);
-  const isTreeData = options.treeData?.groupingField != null;
   const getGroupKey = React.useMemo(() => {
     if (isTreeData) {
       return row => row[options.treeData.groupingField];
@@ -94,6 +136,15 @@ const useMockServer = (dataSetOptions, serverOptions, shouldRequestsFail) => {
       setData(newData);
       return undefined;
     }
+    if (options.dataSet === 'Movies') {
+      const rowsData = {
+        rows: (0, _useMovieData.getMovieRows)(),
+        columns
+      };
+      setData(rowsData);
+      dataCache.set(cacheKey, rowsData);
+      return undefined;
+    }
     let active = true;
     (async () => {
       let rowData;
@@ -125,13 +176,8 @@ const useMockServer = (dataSetOptions, serverOptions, shouldRequestsFail) => {
     };
   }, [columns, isTreeData, options.rowLength, options.treeData?.maxDepth, options.treeData?.groupingField, options.treeData?.averageChildren, options.dataSet, options.maxColumns, index]);
   const fetchRows = React.useCallback(async requestUrl => {
-    if (!data || !requestUrl) {
-      return new Promise(resolve => {
-        resolve({
-          rows: [],
-          rowCount: 0
-        });
-      });
+    if (!requestUrl || !data?.rows) {
+      return sendEmptyResponse();
     }
     const params = decodeParams(requestUrl);
     const verbose = serverOptions?.verbose ?? true;
@@ -159,11 +205,22 @@ const useMockServer = (dataSetOptions, serverOptions, shouldRequestsFail) => {
         setTimeout(() => reject(new Error('Could not fetch the data')), delay);
       });
     }
-    if (isTreeData /* || TODO: `isRowGrouping` */) {
+    if (isTreeData) {
+      const {
+        rows,
+        rootRowCount
+      } = await (0, _serverUtils.processTreeDataRows)(data?.rows ?? [], params, serverOptionsWithDefault, columnsWithDefaultColDef);
+      getRowsResponse = {
+        rows: rows.slice().map(row => (0, _extends2.default)({}, row, {
+          path: undefined
+        })),
+        rowCount: rootRowCount
+      };
+    } else if (isRowGrouping) {
       const {
         rows,
         rootRowCount
-      } = await (0, _serverUtils.processTreeDataRows)(data.rows, params, serverOptionsWithDefault, columnsWithDefaultColDef);
+      } = await (0, _serverUtils.processRowGroupingRows)(data?.rows ?? [], params, serverOptionsWithDefault, columnsWithDefaultColDef);
       getRowsResponse = {
         rows: rows.slice().map(row => (0, _extends2.default)({}, row, {
           path: undefined
@@ -171,12 +228,11 @@ const useMockServer = (dataSetOptions, serverOptions, shouldRequestsFail) => {
         rowCount: rootRowCount
       };
     } else {
-      // plain data
       const {
         returnedRows,
         nextCursor,
         totalRowCount
-      } = await (0, _serverUtils.loadServerRows)(data.rows, (0, _extends2.default)({}, params, params.paginationModel), serverOptionsWithDefault, columnsWithDefaultColDef);
+      } = await (0, _serverUtils.loadServerRows)(data?.rows ?? [], (0, _extends2.default)({}, params, params.paginationModel), serverOptionsWithDefault, columnsWithDefaultColDef);
       getRowsResponse = {
         rows: returnedRows,
         rowCount: totalRowCount,
@@ -191,10 +247,10 @@ const useMockServer = (dataSetOptions, serverOptions, shouldRequestsFail) => {
       }
       resolve(getRowsResponse);
     });
-  }, [data, serverOptions?.verbose, serverOptions?.minDelay, serverOptions?.maxDelay, serverOptions?.useCursorPagination, isTreeData, columnsWithDefaultColDef]);
+  }, [data, serverOptions?.verbose, serverOptions?.minDelay, serverOptions?.maxDelay, serverOptions?.useCursorPagination, isTreeData, columnsWithDefaultColDef, isRowGrouping]);
   return {
     columns: columnsWithDefaultColDef,
-    initialState,
+    initialState: options.dataSet === 'Movies' ? {} : initialState,
     getGroupKey,
     getChildrenCount,
     fetchRows,

package/node/hooks/useMovieData.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useMovieData = void 0;
+exports.useMovieData = exports.getMovieRows = exports.getMovieColumns = void 0;
 const currencyFormatter = new Intl.NumberFormat('en-US', {
   style: 'currency',
   currency: 'USD',
@@ -496,6 +496,10 @@ const ROWS = [{
     name: 'Randy Newman'
   }
 }];
+const getMovieColumns = () => COLUMNS;
+exports.getMovieColumns = getMovieColumns;
+const getMovieRows = () => ROWS;
+exports.getMovieRows = getMovieRows;
 const useMovieData = () => {
   return {
     rows: ROWS,

package/node/hooks/useQuery.js

@@ -12,8 +12,13 @@ var _xDataGridPro = require("@mui/x-data-grid-pro");
 var _internals = require("@mui/x-data-grid/internals");
 var _useDemoData = require("./useDemoData");
 var _serverUtils = require("./serverUtils");
+const DEFAULT_DATASET_OPTIONS = {
+  dataSet: 'Commodity',
+  rowLength: 100,
+  maxColumns: 6
+};
 const createFakeServer = (dataSetOptions, serverOptions) => {
-  const dataSetOptionsWithDefault = (0, _extends2.default)({}, _serverUtils.DEFAULT_DATASET_OPTIONS, dataSetOptions);
+  const dataSetOptionsWithDefault = (0, _extends2.default)({}, DEFAULT_DATASET_OPTIONS, dataSetOptions);
   const serverOptionsWithDefault = (0, _extends2.default)({}, _serverUtils.DEFAULT_SERVER_OPTIONS, serverOptions);
   const columns = (0, _useDemoData.getColumnsFromOptions)(dataSetOptionsWithDefault);
   const initialState = (0, _useDemoData.getInitialState)(dataSetOptionsWithDefault, columns);

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-generator v7.20.0
+ * @mui/x-data-grid-generator v7.22.0
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid-generator",
-  "version": "7.20.0",
+  "version": "7.22.0",
   "description": "Generate fake data for demo purposes only.",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -27,7 +27,7 @@
     "chance": "^1.1.12",
     "clsx": "^2.1.1",
     "lru-cache": "^11.0.1",
-    "@mui/x-data-grid-premium": "7.20.0"
+    "@mui/x-data-grid-premium": "7.22.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",