@mui/x-data-grid-generator 8.13.0 → 8.14.0

package/esm/hooks/useMockServer.js

@@ -9,7 +9,7 @@ import { getCommodityColumns } from "../columns/commodities.columns.js";
 import { getEmployeeColumns } from "../columns/employees.columns.js";
 import { getRealGridData } from "../services/real-data-service.js";
 import { addTreeDataOptionsToDemoData } from "../services/tree-data-generator.js";
-import { loadServerRows, processTreeDataRows, processRowGroupingRows, DEFAULT_SERVER_OPTIONS } from "./serverUtils.js";
+import { loadServerRows, processTreeDataRows, processRowGroupingRows, processPivotingRows, DEFAULT_SERVER_OPTIONS } from "./serverUtils.js";
 import { randomInt } from "../services/index.js";
 import { getMovieRows, getMovieColumns } from "./useMovieData.js";
 const dataCache = new LRUCache({
@@ -17,11 +17,11 @@ const dataCache = new LRUCache({
   ttl: 60 * 5 * 1e3 // 5 minutes
 });
 export const BASE_URL = 'https://mui.com/x/api/data-grid';
-const GET_DEFAULT_DATASET_OPTIONS = isRowGrouping => ({
-  dataSet: isRowGrouping ? 'Movies' : 'Commodity',
-  rowLength: isRowGrouping ? getMovieRows().length : 100,
+const GET_DEFAULT_DATASET_OPTIONS = {
+  dataSet: 'Commodity',
+  rowLength: 100,
   maxColumns: 6
-});
+};
 const getColumnsFromOptions = options => {
   let columns;
   switch (options.dataSet) {
@@ -45,6 +45,28 @@ const getColumnsFromOptions = options => {
   if (options.maxColumns) {
     columns = columns.slice(0, options.maxColumns);
   }
+  if (options.derivedColumns) {
+    columns = columns.reduce((acc, col) => {
+      acc.push(col);
+      if (col.type === 'date' || col.type === 'dateTime') {
+        acc.push({
+          type: 'date',
+          field: `${col.field}-year`,
+          generateData: row => new Date(row[col.field].getFullYear(), 0, 1),
+          editable: false,
+          derivedFrom: col.field
+        });
+        acc.push({
+          type: 'date',
+          field: `${col.field}-month`,
+          generateData: row => new Date(row[col.field].getFullYear(), row[col.field].getMonth(), 1),
+          editable: false,
+          derivedFrom: col.field
+        });
+      }
+      return acc;
+    }, []);
+  }
   return columns;
 };
 function decodeParams(url) {
@@ -95,19 +117,20 @@ export const useMockServer = (dataSetOptions, serverOptions, shouldRequestsFail,
       shouldRequestsFailRef.current = shouldRequestsFail;
     }
   }, [shouldRequestsFail]);
-  const isRowGrouping = dataSetOptions?.rowGrouping ?? false;
-  const options = _extends({}, GET_DEFAULT_DATASET_OPTIONS(isRowGrouping), dataSetOptions);
+  const options = _extends({}, GET_DEFAULT_DATASET_OPTIONS, dataSetOptions);
   const isTreeData = options.treeData?.groupingField != null;
   const columns = React.useMemo(() => {
     return getColumnsFromOptions({
       dataSet: options.dataSet,
       editable: options.editable,
       maxColumns: options.maxColumns,
-      visibleFields: options.visibleFields
+      visibleFields: options.visibleFields,
+      derivedColumns: options.derivedColumns
     });
-  }, [options.dataSet, options.editable, options.maxColumns, options.visibleFields]);
+  }, [options.dataSet, options.editable, options.maxColumns, options.visibleFields, options.derivedColumns]);
   const initialState = React.useMemo(() => getInitialState(columns, options.treeData?.groupingField), [columns, options.treeData?.groupingField]);
-  const columnsWithDefaultColDef = React.useMemo(() => columns.map(column => _extends({}, defaultColDef[column.type || 'string'], column)), [columns]);
+  const columnsWithDerivedColDef = React.useMemo(() => columns.map(column => _extends({}, defaultColDef[column.type || 'string'], column)), [columns]);
+  const columnsWithDefaultColDef = React.useMemo(() => columnsWithDerivedColDef.filter(column => !column.derivedFrom), [columnsWithDerivedColDef]);
   const getGroupKey = React.useMemo(() => {
     if (isTreeData) {
       return row => row[options.treeData.groupingField];
@@ -146,7 +169,7 @@ export const useMockServer = (dataSetOptions, serverOptions, shouldRequestsFail,
     (async () => {
       let rowData;
       const rowLength = options.rowLength;
-      if (rowLength > 1000) {
+      if (rowLength > 1000 && !options.derivedColumns) {
         rowData = await getRealGridData(1000, columns);
         rowData = await extrapolateSeed(rowLength, rowData);
       } else {
@@ -172,9 +195,25 @@ export const useMockServer = (dataSetOptions, serverOptions, shouldRequestsFail,
     return () => {
       active = false;
     };
-  }, [columns, isTreeData, options.rowLength, options.treeData?.maxDepth, options.treeData?.groupingField, options.treeData?.averageChildren, options.dataSet, options.maxColumns, index]);
+  }, [columns, isTreeData, options.rowLength, options.treeData?.maxDepth, options.treeData?.groupingField, options.treeData?.averageChildren, options.dataSet, options.maxColumns, options.derivedColumns, index]);
   const fetchRows = React.useCallback(async requestUrl => {
-    if (!requestUrl || !isDataReady) {
+    let dataDelay = 0;
+    const waitInterval = 10;
+    const waitTimeout = 500 * waitInterval; // 5 seconds
+    // wait until data is ready
+    while (dataRef.current === null) {
+      // prevent infinite loop with a timeout
+      if (dataDelay > waitTimeout) {
+        return sendEmptyResponse();
+      }
+
+      // eslint-disable-next-line no-await-in-loop
+      await new Promise(resolve => {
+        setTimeout(resolve, waitInterval);
+      });
+      dataDelay += waitInterval;
+    }
+    if (!requestUrl) {
       return sendEmptyResponse();
     }
     const params = decodeParams(requestUrl);
@@ -191,10 +230,9 @@ export const useMockServer = (dataSetOptions, serverOptions, shouldRequestsFail,
       useCursorPagination: serverOptions?.useCursorPagination ?? DEFAULT_SERVER_OPTIONS.useCursorPagination
     };
     if (shouldRequestsFailRef.current) {
-      const {
-        minDelay,
-        maxDelay
-      } = serverOptionsWithDefault;
+      // substract the delay made by waiting for data to be ready
+      const minDelay = Math.max(0, serverOptionsWithDefault.minDelay - dataDelay);
+      const maxDelay = Math.max(0, serverOptionsWithDefault.maxDelay - dataDelay);
       const delay = randomInt(minDelay, maxDelay);
       return new Promise((_, reject) => {
         if (verbose) {
@@ -217,7 +255,20 @@ export const useMockServer = (dataSetOptions, serverOptions, shouldRequestsFail,
       }, aggregateRow ? {
         aggregateRow
       } : {});
-    } else if (isRowGrouping) {
+    } else if (typeof params.pivotModel === 'object' && params.pivotModel.columns && params.pivotModel.rows && params.pivotModel.values) {
+      const {
+        rows,
+        rootRowCount,
+        pivotColumns,
+        aggregateRow
+      } = await processPivotingRows(dataRef.current?.rows ?? [], params, serverOptionsWithDefault, columnsWithDerivedColDef);
+      getRowsResponse = {
+        rows: rows.slice(),
+        rowCount: rootRowCount,
+        pivotColumns,
+        aggregateRow
+      };
+    } else if (params.groupFields && params.groupFields.length > 0) {
       const {
         rows,
         rootRowCount,
@@ -254,7 +305,7 @@ export const useMockServer = (dataSetOptions, serverOptions, shouldRequestsFail,
       }
       resolve(getRowsResponse);
     });
-  }, [dataRef, isDataReady, serverOptions?.verbose, serverOptions?.minDelay, serverOptions?.maxDelay, serverOptions?.useCursorPagination, isTreeData, columnsWithDefaultColDef, nestedPagination, isRowGrouping]);
+  }, [dataRef, serverOptions?.verbose, serverOptions?.minDelay, serverOptions?.maxDelay, serverOptions?.useCursorPagination, isTreeData, columnsWithDefaultColDef, columnsWithDerivedColDef, nestedPagination]);
   const editRow = React.useCallback(async (rowId, updatedRow) => {
     return new Promise((resolve, reject) => {
       const minDelay = serverOptions?.minDelay ?? DEFAULT_SERVER_OPTIONS.minDelay;

package/esm/hooks/useQuery.d.ts

@@ -56,6 +56,7 @@ export declare const createFakeServer: (dataSetOptions?: Partial<UseDemoDataOpti
     generateData?: (row: any, context: import("../index.js").GridDataGeneratorContext) => any;
     dataGeneratorUniquenessEnabled?: boolean;
     hide?: boolean;
+    derivedFrom?: string;
   } | {
     type: "actions";
     getActions: (params: import("@mui/x-data-grid").GridRowParams<any>) => readonly React.ReactElement<import("@mui/x-data-grid").GridActionsCellItemProps>[];
@@ -109,6 +110,7 @@ export declare const createFakeServer: (dataSetOptions?: Partial<UseDemoDataOpti
     generateData?: (row: any, context: import("../index.js").GridDataGeneratorContext) => any;
     dataGeneratorUniquenessEnabled?: boolean;
     hide?: boolean;
+    derivedFrom?: string;
   } | {
     type: "singleSelect";
     valueOptions?: import("@mui/x-data-grid").ValueOptions[] | ((params: import("@mui/x-data-grid").GridValueOptionsParams<any>) => Array<import("@mui/x-data-grid").ValueOptions>) | undefined;
@@ -164,6 +166,7 @@ export declare const createFakeServer: (dataSetOptions?: Partial<UseDemoDataOpti
     generateData?: (row: any, context: import("../index.js").GridDataGeneratorContext) => any;
     dataGeneratorUniquenessEnabled?: boolean;
     hide?: boolean;
+    derivedFrom?: string;
   })[];
   initialState: {
     columns: {

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-generator v8.13.0
+ * @mui/x-data-grid-generator v8.14.0
  *
  * @license UNLICENSED
  * This source code is licensed under the UNLICENSED license found in the

package/esm/renderer/renderProgress.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
 import { GridRenderCellParams } from '@mui/x-data-grid-premium';
-export declare function renderProgress(params: GridRenderCellParams<any, number, any>): "" | React.JSX.Element | null;
+export declare function renderProgress(params: GridRenderCellParams<any, number, any>): string | React.JSX.Element | null;

package/esm/renderer/renderProgress.js

@@ -57,6 +57,9 @@ export function renderProgress(params) {
   if (params.value == null) {
     return '';
   }
+  if (params.rowNode.type === 'group') {
+    return `${(params.value * 100).toLocaleString()} %`;
+  }
 
   // If the aggregated value does not have the same unit as the other cell
   // Then we fall back to the default rendering based on `valueGetter` instead of rendering a progress bar.

package/esm/renderer/renderTotalPrice.js

@@ -14,9 +14,17 @@ const Value = styled('div')(({
   alignItems: 'center',
   justifyContent: 'flex-end',
   '&.good': {
-    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.success.mainChannel} /  0.3)` : alpha(theme.palette.success.main, 0.3)
+    color: theme.vars ? `rgb(${theme.vars.palette.success.mainChannel})` : theme.palette.success.main
   },
   '&.bad': {
+    color: theme.vars ? `rgb(${theme.vars.palette.error.mainChannel})` : theme.palette.error.main
+  },
+  '&.filled.good': {
+    color: 'inherit',
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.success.mainChannel} /  0.3)` : alpha(theme.palette.success.main, 0.3)
+  },
+  '&.filled.bad': {
+    color: 'inherit',
     backgroundColor: theme.vars ? `rgba(${theme.vars.palette.error.mainChannel} /  0.3)` : alpha(theme.palette.error.main, 0.3)
   }
 }));
@@ -26,10 +34,11 @@ const currencyFormatter = new Intl.NumberFormat('en-US', {
 });
 const TotalPrice = /*#__PURE__*/React.memo(function TotalPrice(props) {
   const {
-    value
+    value,
+    grouped
   } = props;
   return /*#__PURE__*/_jsx(Value, {
-    className: clsx(value > 1000000 && "good", value < 1000000 && "bad"),
+    className: clsx(value > 1000000 && "good", value < 1000000 && "bad", !grouped && "filled"),
     children: currencyFormatter.format(value)
   });
 });
@@ -45,6 +54,7 @@ export function renderTotalPrice(params) {
     return null;
   }
   return /*#__PURE__*/_jsx(TotalPrice, {
-    value: params.value
+    value: params.value,
+    grouped: params.rowNode.type === 'group'
   });
 }

package/esm/services/gridColDefGenerator.d.ts

@@ -20,4 +20,8 @@ export type GridColDefGenerator = GridColDef & {
    * If `true`, the column will be marked as hidden in the `columnVisibilityModel`.
    */
   hide?: boolean;
+  /**
+   * Reference to the field this column was derived from.
+   */
+  derivedFrom?: string;
 };

package/hooks/serverUtils.d.ts

@@ -1,4 +1,4 @@
-import { GridRowModel, GridFilterModel, GridSortModel, GridColDef, GridRowId, GridPaginationModel, GridValidRowModel, GridAggregationModel } from '@mui/x-data-grid-premium';
+import { GridRowModel, GridFilterModel, GridSortModel, GridColDef, GridRowId, GridPaginationModel, GridValidRowModel, GridAggregationModel, GridPivotModel, GridGetRowsResponse } from '@mui/x-data-grid-premium';
 export interface FakeServerResponse {
   returnedRows: GridRowModel[];
   aggregateRow?: GridValidRowModel;
@@ -13,7 +13,15 @@ export interface PageInfo {
   pageSize?: number;
 }
 export interface DefaultServerOptions {
+  /**
+   * The minimum response delay in milliseconds.
+   * For a large dataset, the response delay can be larger than the minimum delay.
+   */
   minDelay: number;
+  /**
+   * The maximum response delay in milliseconds
+   * For a large dataset, the response delay can be larger than the maximum delay.
+   */
   maxDelay: number;
   useCursorPagination?: boolean;
 }
@@ -38,6 +46,15 @@ export interface ServerSideQueryOptions {
   start?: number;
   end?: number;
   groupFields?: string[];
+  pivotModel?: GridPivotModel;
+}
+interface NestedDataRowsResponse {
+  rows: GridRowModel[];
+  rootRowCount: number;
+  aggregateRow?: GridRowModel;
+}
+interface PivotingDataRowsResponse extends NestedDataRowsResponse {
+  pivotColumns: GridGetRowsResponse['pivotColumns'];
 }
 export declare const disableDelay: any;
 export declare const DEFAULT_SERVER_OPTIONS: DefaultServerOptions;
@@ -45,11 +62,6 @@ export declare const DEFAULT_SERVER_OPTIONS: DefaultServerOptions;
  * Simulates server data loading
  */
 export declare const loadServerRows: (rows: GridRowModel[], queryOptions: QueryOptions, serverOptions: ServerOptions, columnsWithDefaultColDef: GridColDef[]) => Promise<FakeServerResponse>;
-interface NestedDataRowsResponse {
-  rows: GridRowModel[];
-  rootRowCount: number;
-  aggregateRow?: GridRowModel;
-}
 /**
  * Simulates server data for tree-data feature
  */
@@ -58,4 +70,8 @@ export declare const processTreeDataRows: (rows: GridRowModel[], queryOptions: S
  * Simulates server data for row grouping feature
  */
 export declare const processRowGroupingRows: (rows: GridValidRowModel[], queryOptions: ServerSideQueryOptions, serverOptions: ServerOptions, columnsWithDefaultColDef: GridColDef[]) => Promise<NestedDataRowsResponse>;
+/**
+ * Simulates server data for pivoting feature
+ */
+export declare const processPivotingRows: (rows: GridValidRowModel[], queryOptions: ServerSideQueryOptions, serverOptions: ServerOptions, columnsWithDefaultColDef: GridColDef[]) => Promise<PivotingDataRowsResponse>;
 export {};