@mui/x-data-grid-generator 8.0.0-alpha.6 → 8.0.0-alpha.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +242 -1
- package/hooks/serverUtils.d.ts +5 -1
- package/hooks/serverUtils.js +73 -5
- package/hooks/useMockServer.d.ts +1 -1
- package/hooks/useMockServer.js +19 -10
- package/index.js +1 -1
- package/modern/hooks/serverUtils.js +73 -5
- package/modern/hooks/useMockServer.js +19 -10
- package/modern/index.js +1 -1
- package/node/hooks/serverUtils.js +75 -7
- package/node/hooks/useMockServer.js +20 -11
- package/node/index.js +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,247 @@
|
|
|
5
5
|
All notable changes to this project will be documented in this file.
|
|
6
6
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
7
7
|
|
|
8
|
+
## 8.0.0-alpha.8
|
|
9
|
+
|
|
10
|
+
_Jan 16, 2025_
|
|
11
|
+
|
|
12
|
+
We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
|
|
13
|
+
|
|
14
|
+
- 🍬 Improved design for Data Grid [Header filters](https://next.mui.com/x/react-data-grid/filtering/header-filters/)
|
|
15
|
+
|
|
16
|
+
<img width="100%" alt="Data Grid Header filters" src="https://github.com/user-attachments/assets/74a50cd9-7a55-41fc-a2b8-f8a0d5b9120e" />
|
|
17
|
+
|
|
18
|
+
- 🔄 Data Grid [Scroll restoration](https://next.mui.com/x/react-data-grid/scrolling/#scroll-restoration)
|
|
19
|
+
- 📊 Charts support server-side rendering under [some conditions](https://next.mui.com/x/react-charts/getting-started/#server-side-rendering)
|
|
20
|
+
- 🐞 Bugfixes
|
|
21
|
+
|
|
22
|
+
Special thanks go out to the community contributors who have helped make this release possible:
|
|
23
|
+
@lauri865.
|
|
24
|
+
Following are all team members who have contributed to this release:
|
|
25
|
+
@arminmeh, @romgrk, @samuelsycamore, @alexfauquette, @cherniavskii, @flaviendelangle, @JCQuintas, @KenanYusuf, @LukasTy, @michelengelen.
|
|
26
|
+
|
|
27
|
+
<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
|
|
28
|
+
|
|
29
|
+
### Data Grid
|
|
30
|
+
|
|
31
|
+
#### Breaking changes
|
|
32
|
+
|
|
33
|
+
- The clear button in header filter cells has been moved to the header filter menu. Use `slotProps={{ headerFilterCell: { showClearIcon: true } }}` to restore the clear button in the cell.
|
|
34
|
+
|
|
35
|
+
#### `@mui/x-data-grid@8.0.0-alpha.8`
|
|
36
|
+
|
|
37
|
+
- [DataGrid] Improve scrollbar deadzone with overlay scrollbars (#15961) @lauri865
|
|
38
|
+
- [DataGrid] Header filter design improvements (#15991) @KenanYusuf
|
|
39
|
+
- [DataGrid] Scroll restoration (#15623) @lauri865
|
|
40
|
+
- [DataGrid] Fix row, cell and header memoizations (#15666) @lauri865
|
|
41
|
+
|
|
42
|
+
#### `@mui/x-data-grid-pro@8.0.0-alpha.8` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
43
|
+
|
|
44
|
+
Same changes as in `@mui/x-data-grid@8.0.0-alpha.8`, plus:
|
|
45
|
+
|
|
46
|
+
- [DataGridPro] Add test for column pinning with disabled column virtualization (#16176) @cherniavskii
|
|
47
|
+
- [DataGridPro] Fix width of right-pinned column group during resize (#16199) @cherniavskii
|
|
48
|
+
|
|
49
|
+
#### `@mui/x-data-grid-premium@8.0.0-alpha.8` [](https://mui.com/r/x-premium-svg-link 'Premium plan')
|
|
50
|
+
|
|
51
|
+
Same changes as in `@mui/x-data-grid-pro@8.0.0-alpha.8`.
|
|
52
|
+
|
|
53
|
+
### Date and Time Pickers
|
|
54
|
+
|
|
55
|
+
#### Breaking changes
|
|
56
|
+
|
|
57
|
+
- The field is now editable if rendered inside a mobile Picker — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#field-editing-on-mobile-pickers)
|
|
58
|
+
- The `useMultiInputDateRangeField`, `useMultiInputTimeRangeField`, and `useMultiInputDateTimeRangeField` hooks have been removed in favor of the new `useMultiInputRangeField` hook — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#usemultiinputdaterangefield)
|
|
59
|
+
- The component passed to the `field` slot no longer receives the `value`, `onChange`, `timezone`, `format`, `disabled`, `formatDensity`, `enableAccessibleFieldDOMStructure`, `selectedSections` and `onSelectedSectionsChange` props — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#slot-field)
|
|
60
|
+
|
|
61
|
+
#### `@mui/x-date-pickers@8.0.0-alpha.8`
|
|
62
|
+
|
|
63
|
+
- [pickers] Let the field components handle their opening UI, and allow field editing on mobile pickers (#15671) @flaviendelangle
|
|
64
|
+
- [pickers] Remove code duplication for the multi input range fields (#15505) @flaviendelangle
|
|
65
|
+
- [pickers] Rename `onRangePositionChange` into `setRangePosition` in `usePickerRangePositionContext` (#16189) @flaviendelangle
|
|
66
|
+
- [pickers] Use context to pass props from the picker to the field (#16042) @flaviendelangle
|
|
67
|
+
|
|
68
|
+
#### `@mui/x-date-pickers-pro@8.0.0-alpha.8` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
69
|
+
|
|
70
|
+
Same changes as in `@mui/x-date-pickers@8.0.0-alpha.8`.
|
|
71
|
+
|
|
72
|
+
### Charts
|
|
73
|
+
|
|
74
|
+
#### Breaking changes
|
|
75
|
+
|
|
76
|
+
- Charts tooltip markers now have different styles for each chart type. The tooltip and legend marks are now the same.
|
|
77
|
+
- Duplicate axis id's across `x` and `y` axis now log a warning in dev mode. Axis ids should be unique to prevent internal issues.
|
|
78
|
+
|
|
79
|
+
#### `@mui/x-charts@8.0.0-alpha.8`
|
|
80
|
+
|
|
81
|
+
- [charts] Fix flaky charts tests (#16180) @JCQuintas
|
|
82
|
+
- [charts] Handle case where gradient stop `offset` could be `Infinite` (#16131) @JCQuintas
|
|
83
|
+
- [charts] Make `useChartGradientId` public (#16106) @JCQuintas
|
|
84
|
+
- [charts] Move z-axis to plugin (#16130) @alexfauquette
|
|
85
|
+
- [charts] Plot data at first render if `skipAnimation` is set to `true` (#16166) @alexfauquette
|
|
86
|
+
- [charts] Replace tooltip mark with style (#16117) @JCQuintas
|
|
87
|
+
- [charts] Support `rtl` for gradient legend (#16115) @JCQuintas
|
|
88
|
+
- [charts] Use plugin system for series and axes (#15865) @alexfauquette
|
|
89
|
+
|
|
90
|
+
#### `@mui/x-charts-pro@8.0.0-alpha.8` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
91
|
+
|
|
92
|
+
Same changes as in `@mui/x-charts@8.0.0-alpha.8`.
|
|
93
|
+
|
|
94
|
+
### Tree View
|
|
95
|
+
|
|
96
|
+
#### `@mui/x-tree-view@8.0.0-alpha.8`
|
|
97
|
+
|
|
98
|
+
No changes since `@mui/x-tree-view-pro@v8.0.0-alpha.7`.
|
|
99
|
+
|
|
100
|
+
#### `@mui/x-tree-view-pro@8.0.0-alpha.8` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
101
|
+
|
|
102
|
+
Same changes as in `@mui/x-tree-view@8.0.0-alpha.8`.
|
|
103
|
+
|
|
104
|
+
### Docs
|
|
105
|
+
|
|
106
|
+
- [docs] Add example for custom legend (#16169) @alexfauquette
|
|
107
|
+
- [docs] Add full custom field creation example (#15194) @flaviendelangle
|
|
108
|
+
- [docs] Copyedit the Data Grid cell selection page (#16099) @samuelsycamore
|
|
109
|
+
- [docs] Fix demo rendering issue on Codesandbox (#16118) @arminmeh
|
|
110
|
+
- [docs] Remove broken links (#16167) @alexfauquette
|
|
111
|
+
- [docs] Split the Data Grid editing page (#14931) @MBilalShafi
|
|
112
|
+
- [docs] Fix wrong props warnings (#16119) @JCQuintas
|
|
113
|
+
|
|
114
|
+
### Core
|
|
115
|
+
|
|
116
|
+
- [core] Type all references as `RefObject` (#16124) @arminmeh
|
|
117
|
+
- [code-infra] Refactor `react` and `react-dom` definitions to simplify dep resolving (#16160) @LukasTy
|
|
118
|
+
- [code-infra] Stop renovate from updating `date-fns-v2` (#16158) @LukasTy
|
|
119
|
+
- [infra] Improve cherry-pick action target list (#16184) @michelengelen
|
|
120
|
+
- [test] Fix flaky column pinning unit test (#16202) @cherniavskii
|
|
121
|
+
- [test] Fix flaky screenshot (#16182) @cherniavskii
|
|
122
|
+
|
|
123
|
+
## 8.0.0-alpha.7
|
|
124
|
+
|
|
125
|
+
_Jan 9, 2025_
|
|
126
|
+
|
|
127
|
+
We'd like to offer a big thanks to the 13 contributors who made this release possible. Here are some highlights ✨:
|
|
128
|
+
|
|
129
|
+
- 📊 Charts legend is now an HTML element which can be styled more easily
|
|
130
|
+
- 💫 Support [aggregation with server-side data](/x/react-data-grid/server-side-data/aggregation/)
|
|
131
|
+
- 🏎️ Improve Data Grid aggregation performance
|
|
132
|
+
- 🌍 Add Chinese (Taiwan) (zh-TW) locale on the Date and Time Pickers
|
|
133
|
+
- 🌍 Improve Norwegian (nb-NO) locale on the Date and Time Pickers
|
|
134
|
+
- 🐞 Bugfixes
|
|
135
|
+
|
|
136
|
+
Special thanks go out to the community contributors who have helped make this release possible:
|
|
137
|
+
@derek-0000, @josteinjhauge, @k-rajat19, @nusr, @tomashauser.
|
|
138
|
+
Following are all team members who have contributed to this release:
|
|
139
|
+
@cherniavskii, @flaviendelangle, @JCQuintas, @LukasTy, @MBilalShafi, @arminmeh, @romgrk, @oliviertassinari.
|
|
140
|
+
|
|
141
|
+
<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
|
|
142
|
+
|
|
143
|
+
### Data Grid
|
|
144
|
+
|
|
145
|
+
#### `@mui/x-data-grid@8.0.0-alpha.7`
|
|
146
|
+
|
|
147
|
+
- [DataGrid] Improve React 19 support (#15769) @LukasTy
|
|
148
|
+
- [DataGrid] Add `name` attribute to the checkbox selection column (#15178) @derek-0000
|
|
149
|
+
- [DataGrid] Fix number filter field formatting values while typing (#16062) @arminmeh
|
|
150
|
+
- [DataGrid] Fix select all checkbox state reset with server side data (#16034) @MBilalShafi
|
|
151
|
+
- [DataGrid] Refactor: create base button props (#15930) @romgrk
|
|
152
|
+
- [DataGrid] Refactor: create tooltip props (#16086) @romgrk
|
|
153
|
+
- [DataGrid] Fix TS error (#16046) @cherniavskii
|
|
154
|
+
|
|
155
|
+
#### `@mui/x-data-grid-pro@8.0.0-alpha.7` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
156
|
+
|
|
157
|
+
Same changes as in `@mui/x-data-grid@8.0.0-alpha.7`.
|
|
158
|
+
|
|
159
|
+
#### `@mui/x-data-grid-premium@8.0.0-alpha.7` [](https://mui.com/r/x-premium-svg-link 'Premium plan')
|
|
160
|
+
|
|
161
|
+
Same changes as in `@mui/x-data-grid-pro@8.0.0-alpha.7`, plus:
|
|
162
|
+
|
|
163
|
+
- [DataGridPremium] Improve aggregation performance for multiple columns (#16097) @cherniavskii
|
|
164
|
+
- [DataGridPremium] Make Aggregation keyboard accessible in the column menu (#15934) @k-rajat19
|
|
165
|
+
- [DataGridPremium] Server-side aggregation with data source (#15741) @MBilalShafi
|
|
166
|
+
|
|
167
|
+
### Date and Time Pickers
|
|
168
|
+
|
|
169
|
+
#### Breaking changes
|
|
170
|
+
|
|
171
|
+
- The `date-fns` and `date-fns-jalali` date library adapters have been renamed to better align with the current stable major versions — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#✅-rename-date-fns-adapter-imports)
|
|
172
|
+
- Update default `closeOnSelect` and Action Bar `actions` values - [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#update-default-closeonselect-and-action-bar-actions-values)
|
|
173
|
+
- The component passed to the `layout` slot no longer receives the `value`, `onChange` and `onSelectShortcut` props — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#slot-layout).
|
|
174
|
+
- The component passed to the `toolbar` slot no longer receives the `value`, `onChange` and `isLandscape` props — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#slot-toolbar).
|
|
175
|
+
- The component passed to the `shortcuts` slot no longer receives the `onChange`, `isValid` and `isLandscape` props — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#slot-shortcuts).
|
|
176
|
+
- The `PickerShortcutChangeImportance` type has been renamed `PickerChangeImportance` — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#renamed-variables-and-types).
|
|
177
|
+
- The component passed to the `layout` slot no longer receives the `rangePosition` and `onRangePositionChange` on range pickers — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#slot-layout).
|
|
178
|
+
- The component passed to the `toolbar` slot no longer receives the `rangePosition` and `onRangePositionChange` on range pickers — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#slot-toolbar).
|
|
179
|
+
- The component passed to the `tabs` slot no longer receives the `rangePosition` and `onRangePositionChange` on range pickers — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#slot-tabs).
|
|
180
|
+
|
|
181
|
+
#### `@mui/x-date-pickers@8.0.0-alpha.7`
|
|
182
|
+
|
|
183
|
+
- [fields] Handle focusing container with `inputRef.current.focus` on `accessibleFieldDOMStructure` (#15985) @LukasTy
|
|
184
|
+
- [pickers] Always use `setValue` internally to update the picker value (#16056) @flaviendelangle
|
|
185
|
+
- [pickers] Create a new context to pass the range position props to the layout components and to the views (#15846) @flaviendelangle
|
|
186
|
+
- [pickers] Introduce a new concept of `manager` (#15339) @flaviendelangle
|
|
187
|
+
- [pickers] Improve React 19 support (#15769) @LukasTy
|
|
188
|
+
- [pickers] Memoize `<PickersActionBar />` (#16071) @LukasTy
|
|
189
|
+
- [pickers] Remove `NonEmptyDateRange` type (#16035) @flaviendelangle
|
|
190
|
+
- [pickers] Rename `AdapterDateFns` into `AdapterDateFnsV2` and `AdapterDateFnsV3` into `AdapterDateFns` (#16082) @LukasTy
|
|
191
|
+
- [pickers] Rename `ctx.onViewChange` to `ctx.setView` and add it to the actions context (#16044) @flaviendelangle
|
|
192
|
+
- [pickers] Support `date-fns-jalali` v4 (#16011) @LukasTy
|
|
193
|
+
- [pickers] Update `closeOnSelect` and `actionBar.actions` default values (#15944) @LukasTy
|
|
194
|
+
- [pickers] Use `usePickerContext()` and `usePickerActionsContext()` instead of passing props to the `shortcuts` and `toolbar` slots (#15948) @flaviendelangle
|
|
195
|
+
- [l10n] Add Chinese (Taiwan) (zh-TW) locale (#16033) @nusr
|
|
196
|
+
- [l10n] Improve Norwegian (nb-NO) locale (#16089) @josteinjhauge
|
|
197
|
+
|
|
198
|
+
#### `@mui/x-date-pickers-pro@8.0.0-alpha.7` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
199
|
+
|
|
200
|
+
Same changes as in `@mui/x-date-pickers@8.0.0-alpha.7`.
|
|
201
|
+
|
|
202
|
+
### Charts
|
|
203
|
+
|
|
204
|
+
#### Breaking changes
|
|
205
|
+
|
|
206
|
+
- Removed `DefaultChartsLegend` component, since it is now easier to create custom legends — [Learn more](https://next.mui.com/x/react-charts/components/#html-components).
|
|
207
|
+
- The default legend is now an HTML element and can be styled more easily.
|
|
208
|
+
- The `width` and `height` properties of the charts now only apply to the `svg` element, and not their wrappers, this might cause some layout shifts.
|
|
209
|
+
- `slotProps.legend.direction` now accepts `'horizontal' | 'vertical'` instead of `'row' | 'column'` — [Learn more](https://next.mui.com/x/migration/migration-charts-v7/#legend-direction-value-change-✅).
|
|
210
|
+
- The `getSeriesToDisplay` function was removed in favor of the `useLegend` hook. — [Learn more](https://next.mui.com/x/migration/migration-charts-v7/#the-getseriestodisplay-function-was-removed).
|
|
211
|
+
|
|
212
|
+
#### `@mui/x-charts@8.0.0-alpha.7`
|
|
213
|
+
|
|
214
|
+
- [charts] New HTML legend & styles (#15733) @JCQuintas
|
|
215
|
+
- [charts] Improve React 19 support (#15769) @LukasTy
|
|
216
|
+
- [charts] Fix 301 redirection in the API documentation @oliviertassinari
|
|
217
|
+
|
|
218
|
+
#### `@mui/x-charts-pro@8.0.0-alpha.7` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
219
|
+
|
|
220
|
+
Same changes as in `@mui/x-charts@8.0.0-alpha.7`.
|
|
221
|
+
|
|
222
|
+
### Tree View
|
|
223
|
+
|
|
224
|
+
#### `@mui/x-tree-view@8.0.0-alpha.7`
|
|
225
|
+
|
|
226
|
+
- [TreeView] Improve React 19 support (#15769) @LukasTy
|
|
227
|
+
|
|
228
|
+
#### `@mui/x-tree-view-pro@8.0.0-alpha.7` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
229
|
+
|
|
230
|
+
Same changes as in `@mui/x-tree-view@8.0.0-alpha.7`.
|
|
231
|
+
|
|
232
|
+
### Docs
|
|
233
|
+
|
|
234
|
+
- [docs] Fix `EditingWithDatePickers` demo (#15967) @k-rajat19
|
|
235
|
+
- [docs] Fix inconsistent multi input range field separators (#16043) @flaviendelangle
|
|
236
|
+
- [docs] Fix non-existing "adapter" property of `LocalizationProvider` (#16084) @tomashauser
|
|
237
|
+
- [docs] Refactor Data Grid with Date Pickers example (#15992) @LukasTy
|
|
238
|
+
- [docs] Unify the wording of the pickers slots breaking changes (#16036) @flaviendelangle
|
|
239
|
+
|
|
240
|
+
### Core
|
|
241
|
+
|
|
242
|
+
- [core] Clarify the release strategy (#16014) @MBilalShafi
|
|
243
|
+
- [core] Small fixes on docs @oliviertassinari
|
|
244
|
+
- [core] Sync with other repos @oliviertassinari
|
|
245
|
+
- [core] Update the `release:version` docs (#16038) @cherniavskii
|
|
246
|
+
- [code-infra] Add `testSkipIf` and `describeSkipIf` (#16049) @JCQuintas
|
|
247
|
+
- [test] Stabilize flaky Data Grid tests (#16053) @LukasTy
|
|
248
|
+
|
|
8
249
|
## 8.0.0-alpha.6
|
|
9
250
|
|
|
10
251
|
_Dec 26, 2024_
|
|
@@ -104,7 +345,7 @@ Following are all team members who have contributed to this release:
|
|
|
104
345
|
|
|
105
346
|
#### Breaking changes
|
|
106
347
|
|
|
107
|
-
- Passing additional props (like `data-*`, `aria-*`) directly on the Data Grid component is no longer supported. To pass the props, use `slotProps
|
|
348
|
+
- Passing additional props (like `data-*`, `aria-*`) directly on the Data Grid component is no longer supported. To pass the props, use `slotProps`:
|
|
108
349
|
|
|
109
350
|
- For `.root` element, use `slotProps.root`.
|
|
110
351
|
- For `.main` element (the one with `role="grid"`), use `slotProps.main`.
|
package/hooks/serverUtils.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import { GridRowModel, GridFilterModel, GridSortModel, GridColDef, GridRowId, GridPaginationModel, GridValidRowModel } from '@mui/x-data-grid-
|
|
1
|
+
import { GridRowModel, GridFilterModel, GridSortModel, GridColDef, GridRowId, GridPaginationModel, GridValidRowModel, GridAggregationModel } from '@mui/x-data-grid-premium';
|
|
2
2
|
export interface FakeServerResponse {
|
|
3
3
|
returnedRows: GridRowModel[];
|
|
4
|
+
aggregateRow?: GridValidRowModel;
|
|
4
5
|
nextCursor?: string;
|
|
5
6
|
hasNextPage?: boolean;
|
|
6
7
|
totalRowCount: number;
|
|
@@ -22,6 +23,7 @@ export interface QueryOptions {
|
|
|
22
23
|
page?: number;
|
|
23
24
|
pageSize?: number;
|
|
24
25
|
filterModel?: GridFilterModel;
|
|
26
|
+
aggregationModel?: GridAggregationModel;
|
|
25
27
|
sortModel?: GridSortModel;
|
|
26
28
|
start?: number;
|
|
27
29
|
end?: number;
|
|
@@ -32,6 +34,7 @@ export interface ServerSideQueryOptions {
|
|
|
32
34
|
groupKeys?: string[];
|
|
33
35
|
filterModel?: GridFilterModel;
|
|
34
36
|
sortModel?: GridSortModel;
|
|
37
|
+
aggregationModel?: GridAggregationModel;
|
|
35
38
|
start?: number;
|
|
36
39
|
end?: number;
|
|
37
40
|
groupFields?: string[];
|
|
@@ -45,6 +48,7 @@ export declare const loadServerRows: (rows: GridRowModel[], queryOptions: QueryO
|
|
|
45
48
|
interface NestedDataRowsResponse {
|
|
46
49
|
rows: GridRowModel[];
|
|
47
50
|
rootRowCount: number;
|
|
51
|
+
aggregateRow?: GridRowModel;
|
|
48
52
|
}
|
|
49
53
|
/**
|
|
50
54
|
* Simulates server data for tree-data feature
|
package/hooks/serverUtils.js
CHANGED
|
@@ -1,6 +1,16 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
-
import { GridLogicOperator } from '@mui/x-data-grid-
|
|
2
|
+
import { GridLogicOperator, GRID_AGGREGATION_FUNCTIONS } from '@mui/x-data-grid-premium';
|
|
3
3
|
import { randomInt } from "../services/random-generator.js";
|
|
4
|
+
const getAvailableAggregationFunctions = columnType => {
|
|
5
|
+
const availableAggregationFunctions = new Map();
|
|
6
|
+
Object.keys(GRID_AGGREGATION_FUNCTIONS).forEach(functionName => {
|
|
7
|
+
const columnTypes = GRID_AGGREGATION_FUNCTIONS[functionName].columnTypes;
|
|
8
|
+
if (!columnTypes || columnTypes.includes(columnType ?? 'string')) {
|
|
9
|
+
availableAggregationFunctions.set(functionName, GRID_AGGREGATION_FUNCTIONS[functionName]);
|
|
10
|
+
}
|
|
11
|
+
});
|
|
12
|
+
return availableAggregationFunctions;
|
|
13
|
+
};
|
|
4
14
|
export const disableDelay = typeof DISABLE_CHANCE_RANDOM !== 'undefined' && DISABLE_CHANCE_RANDOM;
|
|
5
15
|
export const DEFAULT_SERVER_OPTIONS = {
|
|
6
16
|
minDelay: disableDelay ? 0 : 100,
|
|
@@ -155,6 +165,36 @@ const getFilteredRows = (rows, filterModel, columnsWithDefaultColDef) => {
|
|
|
155
165
|
return filterFunctions[index] === null ? true : filterFunctions[index](value);
|
|
156
166
|
}));
|
|
157
167
|
};
|
|
168
|
+
const applyAggregation = (aggregationModel, colDefs, rows, groupId = 'root') => {
|
|
169
|
+
const columnsToAggregate = Object.keys(aggregationModel);
|
|
170
|
+
if (columnsToAggregate.length === 0) {
|
|
171
|
+
return {};
|
|
172
|
+
}
|
|
173
|
+
const aggregateValues = {};
|
|
174
|
+
columnsToAggregate.forEach(field => {
|
|
175
|
+
const type = colDefs.find(({
|
|
176
|
+
field: f
|
|
177
|
+
}) => f === field)?.type;
|
|
178
|
+
if (!type) {
|
|
179
|
+
return;
|
|
180
|
+
}
|
|
181
|
+
const availableAggregationFunctions = getAvailableAggregationFunctions(type);
|
|
182
|
+
if (!availableAggregationFunctions.has(aggregationModel[field])) {
|
|
183
|
+
return;
|
|
184
|
+
}
|
|
185
|
+
const aggregationFunction = availableAggregationFunctions.get(aggregationModel[field]);
|
|
186
|
+
if (!aggregationFunction) {
|
|
187
|
+
return;
|
|
188
|
+
}
|
|
189
|
+
const values = rows.map(row => row[field]);
|
|
190
|
+
aggregateValues[`${field}Aggregate`] = aggregationFunction.apply({
|
|
191
|
+
values,
|
|
192
|
+
field,
|
|
193
|
+
groupId
|
|
194
|
+
});
|
|
195
|
+
});
|
|
196
|
+
return aggregateValues;
|
|
197
|
+
};
|
|
158
198
|
|
|
159
199
|
/**
|
|
160
200
|
* Simulates server data loading
|
|
@@ -182,6 +222,10 @@ export const loadServerRows = (rows, queryOptions, serverOptions, columnsWithDef
|
|
|
182
222
|
let filteredRows = getFilteredRows(rows, queryOptions.filterModel, columnsWithDefaultColDef);
|
|
183
223
|
const rowComparator = getRowComparator(queryOptions.sortModel, columnsWithDefaultColDef);
|
|
184
224
|
filteredRows = [...filteredRows].sort(rowComparator);
|
|
225
|
+
let aggregateRow = {};
|
|
226
|
+
if (queryOptions.aggregationModel) {
|
|
227
|
+
aggregateRow = applyAggregation(queryOptions.aggregationModel, columnsWithDefaultColDef, filteredRows);
|
|
228
|
+
}
|
|
185
229
|
const totalRowCount = filteredRows.length;
|
|
186
230
|
if (start !== undefined && end !== undefined) {
|
|
187
231
|
firstRowIndex = start;
|
|
@@ -201,12 +245,14 @@ export const loadServerRows = (rows, queryOptions, serverOptions, columnsWithDef
|
|
|
201
245
|
lastRowIndex = (page + 1) * pageSize - 1;
|
|
202
246
|
}
|
|
203
247
|
const hasNextPage = lastRowIndex < filteredRows.length - 1;
|
|
204
|
-
const response = {
|
|
248
|
+
const response = _extends({
|
|
205
249
|
returnedRows: filteredRows.slice(firstRowIndex, lastRowIndex + 1),
|
|
206
250
|
hasNextPage,
|
|
207
251
|
nextCursor,
|
|
208
252
|
totalRowCount
|
|
209
|
-
}
|
|
253
|
+
}, queryOptions.aggregationModel ? {
|
|
254
|
+
aggregateRow
|
|
255
|
+
} : {});
|
|
210
256
|
return new Promise(resolve => {
|
|
211
257
|
setTimeout(() => {
|
|
212
258
|
resolve(response);
|
|
@@ -316,6 +362,12 @@ export const processTreeDataRows = (rows, queryOptions, serverOptions, columnsWi
|
|
|
316
362
|
let childRowsWithDescendantCounts = childRows.map(row => {
|
|
317
363
|
const descendants = findTreeDataRowChildren(filteredRows, row[pathKey], pathKey, -1);
|
|
318
364
|
const descendantCount = descendants.length;
|
|
365
|
+
if (descendantCount > 0 && queryOptions.aggregationModel) {
|
|
366
|
+
// Parent row, compute aggregation
|
|
367
|
+
return _extends({}, row, {
|
|
368
|
+
descendantCount
|
|
369
|
+
}, applyAggregation(queryOptions.aggregationModel, columnsWithDefaultColDef, descendants, row.id));
|
|
370
|
+
}
|
|
319
371
|
return _extends({}, row, {
|
|
320
372
|
descendantCount
|
|
321
373
|
});
|
|
@@ -325,6 +377,10 @@ export const processTreeDataRows = (rows, queryOptions, serverOptions, columnsWi
|
|
|
325
377
|
const rowComparator = getRowComparator(queryOptions.sortModel, columnsWithDefaultColDef);
|
|
326
378
|
childRowsWithDescendantCounts = [...childRowsWithDescendantCounts].sort(rowComparator);
|
|
327
379
|
}
|
|
380
|
+
let aggregateRow;
|
|
381
|
+
if (queryOptions.aggregationModel) {
|
|
382
|
+
aggregateRow = applyAggregation(queryOptions.aggregationModel, columnsWithDefaultColDef, filteredRows);
|
|
383
|
+
}
|
|
328
384
|
if (queryOptions.paginationModel && queryOptions.groupKeys.length === 0) {
|
|
329
385
|
// Only paginate root rows, grid should refetch root rows when `paginationModel` updates
|
|
330
386
|
const {
|
|
@@ -339,7 +395,8 @@ export const processTreeDataRows = (rows, queryOptions, serverOptions, columnsWi
|
|
|
339
395
|
setTimeout(() => {
|
|
340
396
|
resolve({
|
|
341
397
|
rows: childRowsWithDescendantCounts,
|
|
342
|
-
rootRowCount
|
|
398
|
+
rootRowCount,
|
|
399
|
+
aggregateRow
|
|
343
400
|
});
|
|
344
401
|
}, delay); // simulate network latency
|
|
345
402
|
});
|
|
@@ -428,6 +485,12 @@ export const processRowGroupingRows = (rows, queryOptions, serverOptions, column
|
|
|
428
485
|
id
|
|
429
486
|
}) => typeof id !== 'string' || !id.startsWith('auto-generated-parent-'));
|
|
430
487
|
const descendantCount = descendants.length;
|
|
488
|
+
if (descendantCount > 0 && queryOptions.aggregationModel) {
|
|
489
|
+
// Parent row, compute aggregation
|
|
490
|
+
return _extends({}, row, {
|
|
491
|
+
descendantCount
|
|
492
|
+
}, applyAggregation(queryOptions.aggregationModel, columnsWithDefaultColDef, descendants, row.id));
|
|
493
|
+
}
|
|
431
494
|
return _extends({}, row, {
|
|
432
495
|
descendantCount
|
|
433
496
|
});
|
|
@@ -438,6 +501,10 @@ export const processRowGroupingRows = (rows, queryOptions, serverOptions, column
|
|
|
438
501
|
const sortedChildRows = [...childRowsWithDescendantCounts].sort(rowComparator);
|
|
439
502
|
childRowsWithDescendantCounts = [...sortedMissingGroups, ...sortedChildRows];
|
|
440
503
|
}
|
|
504
|
+
let aggregateRow;
|
|
505
|
+
if (queryOptions.aggregationModel) {
|
|
506
|
+
aggregateRow = applyAggregation(queryOptions.aggregationModel, columnsWithDefaultColDef, filteredRows);
|
|
507
|
+
}
|
|
441
508
|
if (queryOptions.paginationModel && queryOptions.groupKeys.length === 0) {
|
|
442
509
|
// Only paginate root rows, grid should refetch root rows when `paginationModel` updates
|
|
443
510
|
const {
|
|
@@ -452,7 +519,8 @@ export const processRowGroupingRows = (rows, queryOptions, serverOptions, column
|
|
|
452
519
|
setTimeout(() => {
|
|
453
520
|
resolve({
|
|
454
521
|
rows: childRowsWithDescendantCounts,
|
|
455
|
-
rootRowCount
|
|
522
|
+
rootRowCount,
|
|
523
|
+
aggregateRow
|
|
456
524
|
});
|
|
457
525
|
}, delay); // simulate network latency
|
|
458
526
|
});
|
package/hooks/useMockServer.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { GridRowModel, GridGetRowsResponse, GridColDef, GridInitialState } from '@mui/x-data-grid-
|
|
1
|
+
import { GridRowModel, GridGetRowsResponse, GridColDef, GridInitialState } from '@mui/x-data-grid-premium';
|
|
2
2
|
import { AddPathToDemoDataOptions } from '../services/tree-data-generator';
|
|
3
3
|
import type { ServerOptions } from './serverUtils';
|
|
4
4
|
export declare const BASE_URL = "https://mui.com/x/api/data-grid";
|
package/hooks/useMockServer.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import { LRUCache } from 'lru-cache';
|
|
4
|
-
import { getGridDefaultColumnTypes } from '@mui/x-data-grid-
|
|
4
|
+
import { getGridDefaultColumnTypes } from '@mui/x-data-grid-premium';
|
|
5
5
|
import { extrapolateSeed, deepFreeze } from "./useDemoData.js";
|
|
6
6
|
import { getCommodityColumns } from "../columns/commodities.columns.js";
|
|
7
7
|
import { getEmployeeColumns } from "../columns/employees.columns.js";
|
|
@@ -200,38 +200,47 @@ export const useMockServer = (dataSetOptions, serverOptions, shouldRequestsFail)
|
|
|
200
200
|
if (isTreeData) {
|
|
201
201
|
const {
|
|
202
202
|
rows,
|
|
203
|
-
rootRowCount
|
|
203
|
+
rootRowCount,
|
|
204
|
+
aggregateRow
|
|
204
205
|
} = await processTreeDataRows(data?.rows ?? [], params, serverOptionsWithDefault, columnsWithDefaultColDef);
|
|
205
|
-
getRowsResponse = {
|
|
206
|
+
getRowsResponse = _extends({
|
|
206
207
|
rows: rows.slice().map(row => _extends({}, row, {
|
|
207
208
|
path: undefined
|
|
208
209
|
})),
|
|
209
210
|
rowCount: rootRowCount
|
|
210
|
-
}
|
|
211
|
+
}, aggregateRow ? {
|
|
212
|
+
aggregateRow
|
|
213
|
+
} : {});
|
|
211
214
|
} else if (isRowGrouping) {
|
|
212
215
|
const {
|
|
213
216
|
rows,
|
|
214
|
-
rootRowCount
|
|
217
|
+
rootRowCount,
|
|
218
|
+
aggregateRow
|
|
215
219
|
} = await processRowGroupingRows(data?.rows ?? [], params, serverOptionsWithDefault, columnsWithDefaultColDef);
|
|
216
|
-
getRowsResponse = {
|
|
220
|
+
getRowsResponse = _extends({
|
|
217
221
|
rows: rows.slice().map(row => _extends({}, row, {
|
|
218
222
|
path: undefined
|
|
219
223
|
})),
|
|
220
224
|
rowCount: rootRowCount
|
|
221
|
-
}
|
|
225
|
+
}, aggregateRow ? {
|
|
226
|
+
aggregateRow
|
|
227
|
+
} : {});
|
|
222
228
|
} else {
|
|
223
229
|
const {
|
|
224
230
|
returnedRows,
|
|
225
231
|
nextCursor,
|
|
226
|
-
totalRowCount
|
|
232
|
+
totalRowCount,
|
|
233
|
+
aggregateRow
|
|
227
234
|
} = await loadServerRows(data?.rows ?? [], _extends({}, params, params.paginationModel), serverOptionsWithDefault, columnsWithDefaultColDef);
|
|
228
|
-
getRowsResponse = {
|
|
235
|
+
getRowsResponse = _extends({
|
|
229
236
|
rows: returnedRows,
|
|
230
237
|
rowCount: totalRowCount,
|
|
231
238
|
pageInfo: {
|
|
232
239
|
nextCursor
|
|
233
240
|
}
|
|
234
|
-
}
|
|
241
|
+
}, aggregateRow ? {
|
|
242
|
+
aggregateRow
|
|
243
|
+
} : {});
|
|
235
244
|
}
|
|
236
245
|
return new Promise(resolve => {
|
|
237
246
|
if (verbose) {
|
package/index.js
CHANGED
|
@@ -1,6 +1,16 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
-
import { GridLogicOperator } from '@mui/x-data-grid-
|
|
2
|
+
import { GridLogicOperator, GRID_AGGREGATION_FUNCTIONS } from '@mui/x-data-grid-premium';
|
|
3
3
|
import { randomInt } from "../services/random-generator.js";
|
|
4
|
+
const getAvailableAggregationFunctions = columnType => {
|
|
5
|
+
const availableAggregationFunctions = new Map();
|
|
6
|
+
Object.keys(GRID_AGGREGATION_FUNCTIONS).forEach(functionName => {
|
|
7
|
+
const columnTypes = GRID_AGGREGATION_FUNCTIONS[functionName].columnTypes;
|
|
8
|
+
if (!columnTypes || columnTypes.includes(columnType ?? 'string')) {
|
|
9
|
+
availableAggregationFunctions.set(functionName, GRID_AGGREGATION_FUNCTIONS[functionName]);
|
|
10
|
+
}
|
|
11
|
+
});
|
|
12
|
+
return availableAggregationFunctions;
|
|
13
|
+
};
|
|
4
14
|
export const disableDelay = typeof DISABLE_CHANCE_RANDOM !== 'undefined' && DISABLE_CHANCE_RANDOM;
|
|
5
15
|
export const DEFAULT_SERVER_OPTIONS = {
|
|
6
16
|
minDelay: disableDelay ? 0 : 100,
|
|
@@ -155,6 +165,36 @@ const getFilteredRows = (rows, filterModel, columnsWithDefaultColDef) => {
|
|
|
155
165
|
return filterFunctions[index] === null ? true : filterFunctions[index](value);
|
|
156
166
|
}));
|
|
157
167
|
};
|
|
168
|
+
const applyAggregation = (aggregationModel, colDefs, rows, groupId = 'root') => {
|
|
169
|
+
const columnsToAggregate = Object.keys(aggregationModel);
|
|
170
|
+
if (columnsToAggregate.length === 0) {
|
|
171
|
+
return {};
|
|
172
|
+
}
|
|
173
|
+
const aggregateValues = {};
|
|
174
|
+
columnsToAggregate.forEach(field => {
|
|
175
|
+
const type = colDefs.find(({
|
|
176
|
+
field: f
|
|
177
|
+
}) => f === field)?.type;
|
|
178
|
+
if (!type) {
|
|
179
|
+
return;
|
|
180
|
+
}
|
|
181
|
+
const availableAggregationFunctions = getAvailableAggregationFunctions(type);
|
|
182
|
+
if (!availableAggregationFunctions.has(aggregationModel[field])) {
|
|
183
|
+
return;
|
|
184
|
+
}
|
|
185
|
+
const aggregationFunction = availableAggregationFunctions.get(aggregationModel[field]);
|
|
186
|
+
if (!aggregationFunction) {
|
|
187
|
+
return;
|
|
188
|
+
}
|
|
189
|
+
const values = rows.map(row => row[field]);
|
|
190
|
+
aggregateValues[`${field}Aggregate`] = aggregationFunction.apply({
|
|
191
|
+
values,
|
|
192
|
+
field,
|
|
193
|
+
groupId
|
|
194
|
+
});
|
|
195
|
+
});
|
|
196
|
+
return aggregateValues;
|
|
197
|
+
};
|
|
158
198
|
|
|
159
199
|
/**
|
|
160
200
|
* Simulates server data loading
|
|
@@ -182,6 +222,10 @@ export const loadServerRows = (rows, queryOptions, serverOptions, columnsWithDef
|
|
|
182
222
|
let filteredRows = getFilteredRows(rows, queryOptions.filterModel, columnsWithDefaultColDef);
|
|
183
223
|
const rowComparator = getRowComparator(queryOptions.sortModel, columnsWithDefaultColDef);
|
|
184
224
|
filteredRows = [...filteredRows].sort(rowComparator);
|
|
225
|
+
let aggregateRow = {};
|
|
226
|
+
if (queryOptions.aggregationModel) {
|
|
227
|
+
aggregateRow = applyAggregation(queryOptions.aggregationModel, columnsWithDefaultColDef, filteredRows);
|
|
228
|
+
}
|
|
185
229
|
const totalRowCount = filteredRows.length;
|
|
186
230
|
if (start !== undefined && end !== undefined) {
|
|
187
231
|
firstRowIndex = start;
|
|
@@ -201,12 +245,14 @@ export const loadServerRows = (rows, queryOptions, serverOptions, columnsWithDef
|
|
|
201
245
|
lastRowIndex = (page + 1) * pageSize - 1;
|
|
202
246
|
}
|
|
203
247
|
const hasNextPage = lastRowIndex < filteredRows.length - 1;
|
|
204
|
-
const response = {
|
|
248
|
+
const response = _extends({
|
|
205
249
|
returnedRows: filteredRows.slice(firstRowIndex, lastRowIndex + 1),
|
|
206
250
|
hasNextPage,
|
|
207
251
|
nextCursor,
|
|
208
252
|
totalRowCount
|
|
209
|
-
}
|
|
253
|
+
}, queryOptions.aggregationModel ? {
|
|
254
|
+
aggregateRow
|
|
255
|
+
} : {});
|
|
210
256
|
return new Promise(resolve => {
|
|
211
257
|
setTimeout(() => {
|
|
212
258
|
resolve(response);
|
|
@@ -316,6 +362,12 @@ export const processTreeDataRows = (rows, queryOptions, serverOptions, columnsWi
|
|
|
316
362
|
let childRowsWithDescendantCounts = childRows.map(row => {
|
|
317
363
|
const descendants = findTreeDataRowChildren(filteredRows, row[pathKey], pathKey, -1);
|
|
318
364
|
const descendantCount = descendants.length;
|
|
365
|
+
if (descendantCount > 0 && queryOptions.aggregationModel) {
|
|
366
|
+
// Parent row, compute aggregation
|
|
367
|
+
return _extends({}, row, {
|
|
368
|
+
descendantCount
|
|
369
|
+
}, applyAggregation(queryOptions.aggregationModel, columnsWithDefaultColDef, descendants, row.id));
|
|
370
|
+
}
|
|
319
371
|
return _extends({}, row, {
|
|
320
372
|
descendantCount
|
|
321
373
|
});
|
|
@@ -325,6 +377,10 @@ export const processTreeDataRows = (rows, queryOptions, serverOptions, columnsWi
|
|
|
325
377
|
const rowComparator = getRowComparator(queryOptions.sortModel, columnsWithDefaultColDef);
|
|
326
378
|
childRowsWithDescendantCounts = [...childRowsWithDescendantCounts].sort(rowComparator);
|
|
327
379
|
}
|
|
380
|
+
let aggregateRow;
|
|
381
|
+
if (queryOptions.aggregationModel) {
|
|
382
|
+
aggregateRow = applyAggregation(queryOptions.aggregationModel, columnsWithDefaultColDef, filteredRows);
|
|
383
|
+
}
|
|
328
384
|
if (queryOptions.paginationModel && queryOptions.groupKeys.length === 0) {
|
|
329
385
|
// Only paginate root rows, grid should refetch root rows when `paginationModel` updates
|
|
330
386
|
const {
|
|
@@ -339,7 +395,8 @@ export const processTreeDataRows = (rows, queryOptions, serverOptions, columnsWi
|
|
|
339
395
|
setTimeout(() => {
|
|
340
396
|
resolve({
|
|
341
397
|
rows: childRowsWithDescendantCounts,
|
|
342
|
-
rootRowCount
|
|
398
|
+
rootRowCount,
|
|
399
|
+
aggregateRow
|
|
343
400
|
});
|
|
344
401
|
}, delay); // simulate network latency
|
|
345
402
|
});
|
|
@@ -428,6 +485,12 @@ export const processRowGroupingRows = (rows, queryOptions, serverOptions, column
|
|
|
428
485
|
id
|
|
429
486
|
}) => typeof id !== 'string' || !id.startsWith('auto-generated-parent-'));
|
|
430
487
|
const descendantCount = descendants.length;
|
|
488
|
+
if (descendantCount > 0 && queryOptions.aggregationModel) {
|
|
489
|
+
// Parent row, compute aggregation
|
|
490
|
+
return _extends({}, row, {
|
|
491
|
+
descendantCount
|
|
492
|
+
}, applyAggregation(queryOptions.aggregationModel, columnsWithDefaultColDef, descendants, row.id));
|
|
493
|
+
}
|
|
431
494
|
return _extends({}, row, {
|
|
432
495
|
descendantCount
|
|
433
496
|
});
|
|
@@ -438,6 +501,10 @@ export const processRowGroupingRows = (rows, queryOptions, serverOptions, column
|
|
|
438
501
|
const sortedChildRows = [...childRowsWithDescendantCounts].sort(rowComparator);
|
|
439
502
|
childRowsWithDescendantCounts = [...sortedMissingGroups, ...sortedChildRows];
|
|
440
503
|
}
|
|
504
|
+
let aggregateRow;
|
|
505
|
+
if (queryOptions.aggregationModel) {
|
|
506
|
+
aggregateRow = applyAggregation(queryOptions.aggregationModel, columnsWithDefaultColDef, filteredRows);
|
|
507
|
+
}
|
|
441
508
|
if (queryOptions.paginationModel && queryOptions.groupKeys.length === 0) {
|
|
442
509
|
// Only paginate root rows, grid should refetch root rows when `paginationModel` updates
|
|
443
510
|
const {
|
|
@@ -452,7 +519,8 @@ export const processRowGroupingRows = (rows, queryOptions, serverOptions, column
|
|
|
452
519
|
setTimeout(() => {
|
|
453
520
|
resolve({
|
|
454
521
|
rows: childRowsWithDescendantCounts,
|
|
455
|
-
rootRowCount
|
|
522
|
+
rootRowCount,
|
|
523
|
+
aggregateRow
|
|
456
524
|
});
|
|
457
525
|
}, delay); // simulate network latency
|
|
458
526
|
});
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import { LRUCache } from 'lru-cache';
|
|
4
|
-
import { getGridDefaultColumnTypes } from '@mui/x-data-grid-
|
|
4
|
+
import { getGridDefaultColumnTypes } from '@mui/x-data-grid-premium';
|
|
5
5
|
import { extrapolateSeed, deepFreeze } from "./useDemoData.js";
|
|
6
6
|
import { getCommodityColumns } from "../columns/commodities.columns.js";
|
|
7
7
|
import { getEmployeeColumns } from "../columns/employees.columns.js";
|
|
@@ -200,38 +200,47 @@ export const useMockServer = (dataSetOptions, serverOptions, shouldRequestsFail)
|
|
|
200
200
|
if (isTreeData) {
|
|
201
201
|
const {
|
|
202
202
|
rows,
|
|
203
|
-
rootRowCount
|
|
203
|
+
rootRowCount,
|
|
204
|
+
aggregateRow
|
|
204
205
|
} = await processTreeDataRows(data?.rows ?? [], params, serverOptionsWithDefault, columnsWithDefaultColDef);
|
|
205
|
-
getRowsResponse = {
|
|
206
|
+
getRowsResponse = _extends({
|
|
206
207
|
rows: rows.slice().map(row => _extends({}, row, {
|
|
207
208
|
path: undefined
|
|
208
209
|
})),
|
|
209
210
|
rowCount: rootRowCount
|
|
210
|
-
}
|
|
211
|
+
}, aggregateRow ? {
|
|
212
|
+
aggregateRow
|
|
213
|
+
} : {});
|
|
211
214
|
} else if (isRowGrouping) {
|
|
212
215
|
const {
|
|
213
216
|
rows,
|
|
214
|
-
rootRowCount
|
|
217
|
+
rootRowCount,
|
|
218
|
+
aggregateRow
|
|
215
219
|
} = await processRowGroupingRows(data?.rows ?? [], params, serverOptionsWithDefault, columnsWithDefaultColDef);
|
|
216
|
-
getRowsResponse = {
|
|
220
|
+
getRowsResponse = _extends({
|
|
217
221
|
rows: rows.slice().map(row => _extends({}, row, {
|
|
218
222
|
path: undefined
|
|
219
223
|
})),
|
|
220
224
|
rowCount: rootRowCount
|
|
221
|
-
}
|
|
225
|
+
}, aggregateRow ? {
|
|
226
|
+
aggregateRow
|
|
227
|
+
} : {});
|
|
222
228
|
} else {
|
|
223
229
|
const {
|
|
224
230
|
returnedRows,
|
|
225
231
|
nextCursor,
|
|
226
|
-
totalRowCount
|
|
232
|
+
totalRowCount,
|
|
233
|
+
aggregateRow
|
|
227
234
|
} = await loadServerRows(data?.rows ?? [], _extends({}, params, params.paginationModel), serverOptionsWithDefault, columnsWithDefaultColDef);
|
|
228
|
-
getRowsResponse = {
|
|
235
|
+
getRowsResponse = _extends({
|
|
229
236
|
rows: returnedRows,
|
|
230
237
|
rowCount: totalRowCount,
|
|
231
238
|
pageInfo: {
|
|
232
239
|
nextCursor
|
|
233
240
|
}
|
|
234
|
-
}
|
|
241
|
+
}, aggregateRow ? {
|
|
242
|
+
aggregateRow
|
|
243
|
+
} : {});
|
|
235
244
|
}
|
|
236
245
|
return new Promise(resolve => {
|
|
237
246
|
if (verbose) {
|
package/modern/index.js
CHANGED
|
@@ -6,8 +6,18 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.processTreeDataRows = exports.processRowGroupingRows = exports.loadServerRows = exports.disableDelay = exports.DEFAULT_SERVER_OPTIONS = void 0;
|
|
8
8
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
|
-
var
|
|
9
|
+
var _xDataGridPremium = require("@mui/x-data-grid-premium");
|
|
10
10
|
var _randomGenerator = require("../services/random-generator");
|
|
11
|
+
const getAvailableAggregationFunctions = columnType => {
|
|
12
|
+
const availableAggregationFunctions = new Map();
|
|
13
|
+
Object.keys(_xDataGridPremium.GRID_AGGREGATION_FUNCTIONS).forEach(functionName => {
|
|
14
|
+
const columnTypes = _xDataGridPremium.GRID_AGGREGATION_FUNCTIONS[functionName].columnTypes;
|
|
15
|
+
if (!columnTypes || columnTypes.includes(columnType ?? 'string')) {
|
|
16
|
+
availableAggregationFunctions.set(functionName, _xDataGridPremium.GRID_AGGREGATION_FUNCTIONS[functionName]);
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
return availableAggregationFunctions;
|
|
20
|
+
};
|
|
11
21
|
const disableDelay = exports.disableDelay = typeof DISABLE_CHANCE_RANDOM !== 'undefined' && DISABLE_CHANCE_RANDOM;
|
|
12
22
|
const DEFAULT_SERVER_OPTIONS = exports.DEFAULT_SERVER_OPTIONS = {
|
|
13
23
|
minDelay: disableDelay ? 0 : 100,
|
|
@@ -117,7 +127,7 @@ const getQuicklyFilteredRows = (rows, filterModel, columnsWithDefaultColDef) =>
|
|
|
117
127
|
if (isRowMatchingQuickFilter) {
|
|
118
128
|
return rows.filter(row => {
|
|
119
129
|
const result = isRowMatchingQuickFilter(row);
|
|
120
|
-
return filterModel.quickFilterLogicOperator ===
|
|
130
|
+
return filterModel.quickFilterLogicOperator === _xDataGridPremium.GridLogicOperator.And ? Object.values(result).every(Boolean) : Object.values(result).some(Boolean);
|
|
121
131
|
});
|
|
122
132
|
}
|
|
123
133
|
return rows;
|
|
@@ -151,7 +161,7 @@ const getFilteredRows = (rows, filterModel, columnsWithDefaultColDef) => {
|
|
|
151
161
|
value: parsedValue
|
|
152
162
|
}, colDef);
|
|
153
163
|
});
|
|
154
|
-
if (filterModel.logicOperator ===
|
|
164
|
+
if (filterModel.logicOperator === _xDataGridPremium.GridLogicOperator.Or) {
|
|
155
165
|
return rows.filter(row => filterModel.items.some((_, index) => {
|
|
156
166
|
const value = valueGetters[index](row);
|
|
157
167
|
return filterFunctions[index] === null ? true : filterFunctions[index](value);
|
|
@@ -162,6 +172,36 @@ const getFilteredRows = (rows, filterModel, columnsWithDefaultColDef) => {
|
|
|
162
172
|
return filterFunctions[index] === null ? true : filterFunctions[index](value);
|
|
163
173
|
}));
|
|
164
174
|
};
|
|
175
|
+
const applyAggregation = (aggregationModel, colDefs, rows, groupId = 'root') => {
|
|
176
|
+
const columnsToAggregate = Object.keys(aggregationModel);
|
|
177
|
+
if (columnsToAggregate.length === 0) {
|
|
178
|
+
return {};
|
|
179
|
+
}
|
|
180
|
+
const aggregateValues = {};
|
|
181
|
+
columnsToAggregate.forEach(field => {
|
|
182
|
+
const type = colDefs.find(({
|
|
183
|
+
field: f
|
|
184
|
+
}) => f === field)?.type;
|
|
185
|
+
if (!type) {
|
|
186
|
+
return;
|
|
187
|
+
}
|
|
188
|
+
const availableAggregationFunctions = getAvailableAggregationFunctions(type);
|
|
189
|
+
if (!availableAggregationFunctions.has(aggregationModel[field])) {
|
|
190
|
+
return;
|
|
191
|
+
}
|
|
192
|
+
const aggregationFunction = availableAggregationFunctions.get(aggregationModel[field]);
|
|
193
|
+
if (!aggregationFunction) {
|
|
194
|
+
return;
|
|
195
|
+
}
|
|
196
|
+
const values = rows.map(row => row[field]);
|
|
197
|
+
aggregateValues[`${field}Aggregate`] = aggregationFunction.apply({
|
|
198
|
+
values,
|
|
199
|
+
field,
|
|
200
|
+
groupId
|
|
201
|
+
});
|
|
202
|
+
});
|
|
203
|
+
return aggregateValues;
|
|
204
|
+
};
|
|
165
205
|
|
|
166
206
|
/**
|
|
167
207
|
* Simulates server data loading
|
|
@@ -189,6 +229,10 @@ const loadServerRows = (rows, queryOptions, serverOptions, columnsWithDefaultCol
|
|
|
189
229
|
let filteredRows = getFilteredRows(rows, queryOptions.filterModel, columnsWithDefaultColDef);
|
|
190
230
|
const rowComparator = getRowComparator(queryOptions.sortModel, columnsWithDefaultColDef);
|
|
191
231
|
filteredRows = [...filteredRows].sort(rowComparator);
|
|
232
|
+
let aggregateRow = {};
|
|
233
|
+
if (queryOptions.aggregationModel) {
|
|
234
|
+
aggregateRow = applyAggregation(queryOptions.aggregationModel, columnsWithDefaultColDef, filteredRows);
|
|
235
|
+
}
|
|
192
236
|
const totalRowCount = filteredRows.length;
|
|
193
237
|
if (start !== undefined && end !== undefined) {
|
|
194
238
|
firstRowIndex = start;
|
|
@@ -208,12 +252,14 @@ const loadServerRows = (rows, queryOptions, serverOptions, columnsWithDefaultCol
|
|
|
208
252
|
lastRowIndex = (page + 1) * pageSize - 1;
|
|
209
253
|
}
|
|
210
254
|
const hasNextPage = lastRowIndex < filteredRows.length - 1;
|
|
211
|
-
const response = {
|
|
255
|
+
const response = (0, _extends2.default)({
|
|
212
256
|
returnedRows: filteredRows.slice(firstRowIndex, lastRowIndex + 1),
|
|
213
257
|
hasNextPage,
|
|
214
258
|
nextCursor,
|
|
215
259
|
totalRowCount
|
|
216
|
-
}
|
|
260
|
+
}, queryOptions.aggregationModel ? {
|
|
261
|
+
aggregateRow
|
|
262
|
+
} : {});
|
|
217
263
|
return new Promise(resolve => {
|
|
218
264
|
setTimeout(() => {
|
|
219
265
|
resolve(response);
|
|
@@ -324,6 +370,12 @@ const processTreeDataRows = (rows, queryOptions, serverOptions, columnsWithDefau
|
|
|
324
370
|
let childRowsWithDescendantCounts = childRows.map(row => {
|
|
325
371
|
const descendants = findTreeDataRowChildren(filteredRows, row[pathKey], pathKey, -1);
|
|
326
372
|
const descendantCount = descendants.length;
|
|
373
|
+
if (descendantCount > 0 && queryOptions.aggregationModel) {
|
|
374
|
+
// Parent row, compute aggregation
|
|
375
|
+
return (0, _extends2.default)({}, row, {
|
|
376
|
+
descendantCount
|
|
377
|
+
}, applyAggregation(queryOptions.aggregationModel, columnsWithDefaultColDef, descendants, row.id));
|
|
378
|
+
}
|
|
327
379
|
return (0, _extends2.default)({}, row, {
|
|
328
380
|
descendantCount
|
|
329
381
|
});
|
|
@@ -333,6 +385,10 @@ const processTreeDataRows = (rows, queryOptions, serverOptions, columnsWithDefau
|
|
|
333
385
|
const rowComparator = getRowComparator(queryOptions.sortModel, columnsWithDefaultColDef);
|
|
334
386
|
childRowsWithDescendantCounts = [...childRowsWithDescendantCounts].sort(rowComparator);
|
|
335
387
|
}
|
|
388
|
+
let aggregateRow;
|
|
389
|
+
if (queryOptions.aggregationModel) {
|
|
390
|
+
aggregateRow = applyAggregation(queryOptions.aggregationModel, columnsWithDefaultColDef, filteredRows);
|
|
391
|
+
}
|
|
336
392
|
if (queryOptions.paginationModel && queryOptions.groupKeys.length === 0) {
|
|
337
393
|
// Only paginate root rows, grid should refetch root rows when `paginationModel` updates
|
|
338
394
|
const {
|
|
@@ -347,7 +403,8 @@ const processTreeDataRows = (rows, queryOptions, serverOptions, columnsWithDefau
|
|
|
347
403
|
setTimeout(() => {
|
|
348
404
|
resolve({
|
|
349
405
|
rows: childRowsWithDescendantCounts,
|
|
350
|
-
rootRowCount
|
|
406
|
+
rootRowCount,
|
|
407
|
+
aggregateRow
|
|
351
408
|
});
|
|
352
409
|
}, delay); // simulate network latency
|
|
353
410
|
});
|
|
@@ -437,6 +494,12 @@ const processRowGroupingRows = (rows, queryOptions, serverOptions, columnsWithDe
|
|
|
437
494
|
id
|
|
438
495
|
}) => typeof id !== 'string' || !id.startsWith('auto-generated-parent-'));
|
|
439
496
|
const descendantCount = descendants.length;
|
|
497
|
+
if (descendantCount > 0 && queryOptions.aggregationModel) {
|
|
498
|
+
// Parent row, compute aggregation
|
|
499
|
+
return (0, _extends2.default)({}, row, {
|
|
500
|
+
descendantCount
|
|
501
|
+
}, applyAggregation(queryOptions.aggregationModel, columnsWithDefaultColDef, descendants, row.id));
|
|
502
|
+
}
|
|
440
503
|
return (0, _extends2.default)({}, row, {
|
|
441
504
|
descendantCount
|
|
442
505
|
});
|
|
@@ -447,6 +510,10 @@ const processRowGroupingRows = (rows, queryOptions, serverOptions, columnsWithDe
|
|
|
447
510
|
const sortedChildRows = [...childRowsWithDescendantCounts].sort(rowComparator);
|
|
448
511
|
childRowsWithDescendantCounts = [...sortedMissingGroups, ...sortedChildRows];
|
|
449
512
|
}
|
|
513
|
+
let aggregateRow;
|
|
514
|
+
if (queryOptions.aggregationModel) {
|
|
515
|
+
aggregateRow = applyAggregation(queryOptions.aggregationModel, columnsWithDefaultColDef, filteredRows);
|
|
516
|
+
}
|
|
450
517
|
if (queryOptions.paginationModel && queryOptions.groupKeys.length === 0) {
|
|
451
518
|
// Only paginate root rows, grid should refetch root rows when `paginationModel` updates
|
|
452
519
|
const {
|
|
@@ -461,7 +528,8 @@ const processRowGroupingRows = (rows, queryOptions, serverOptions, columnsWithDe
|
|
|
461
528
|
setTimeout(() => {
|
|
462
529
|
resolve({
|
|
463
530
|
rows: childRowsWithDescendantCounts,
|
|
464
|
-
rootRowCount
|
|
531
|
+
rootRowCount,
|
|
532
|
+
aggregateRow
|
|
465
533
|
});
|
|
466
534
|
}, delay); // simulate network latency
|
|
467
535
|
});
|
|
@@ -9,7 +9,7 @@ exports.useMockServer = exports.BASE_URL = void 0;
|
|
|
9
9
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
10
10
|
var React = _interopRequireWildcard(require("react"));
|
|
11
11
|
var _lruCache = require("lru-cache");
|
|
12
|
-
var
|
|
12
|
+
var _xDataGridPremium = require("@mui/x-data-grid-premium");
|
|
13
13
|
var _useDemoData = require("./useDemoData");
|
|
14
14
|
var _commodities = require("../columns/commodities.columns");
|
|
15
15
|
var _employees = require("../columns/employees.columns");
|
|
@@ -82,7 +82,7 @@ const getInitialState = (columns, groupingField) => {
|
|
|
82
82
|
}
|
|
83
83
|
};
|
|
84
84
|
};
|
|
85
|
-
const defaultColDef = (0,
|
|
85
|
+
const defaultColDef = (0, _xDataGridPremium.getGridDefaultColumnTypes)();
|
|
86
86
|
function sendEmptyResponse() {
|
|
87
87
|
return new Promise(resolve => {
|
|
88
88
|
resolve({
|
|
@@ -208,38 +208,47 @@ const useMockServer = (dataSetOptions, serverOptions, shouldRequestsFail) => {
|
|
|
208
208
|
if (isTreeData) {
|
|
209
209
|
const {
|
|
210
210
|
rows,
|
|
211
|
-
rootRowCount
|
|
211
|
+
rootRowCount,
|
|
212
|
+
aggregateRow
|
|
212
213
|
} = await (0, _serverUtils.processTreeDataRows)(data?.rows ?? [], params, serverOptionsWithDefault, columnsWithDefaultColDef);
|
|
213
|
-
getRowsResponse = {
|
|
214
|
+
getRowsResponse = (0, _extends2.default)({
|
|
214
215
|
rows: rows.slice().map(row => (0, _extends2.default)({}, row, {
|
|
215
216
|
path: undefined
|
|
216
217
|
})),
|
|
217
218
|
rowCount: rootRowCount
|
|
218
|
-
}
|
|
219
|
+
}, aggregateRow ? {
|
|
220
|
+
aggregateRow
|
|
221
|
+
} : {});
|
|
219
222
|
} else if (isRowGrouping) {
|
|
220
223
|
const {
|
|
221
224
|
rows,
|
|
222
|
-
rootRowCount
|
|
225
|
+
rootRowCount,
|
|
226
|
+
aggregateRow
|
|
223
227
|
} = await (0, _serverUtils.processRowGroupingRows)(data?.rows ?? [], params, serverOptionsWithDefault, columnsWithDefaultColDef);
|
|
224
|
-
getRowsResponse = {
|
|
228
|
+
getRowsResponse = (0, _extends2.default)({
|
|
225
229
|
rows: rows.slice().map(row => (0, _extends2.default)({}, row, {
|
|
226
230
|
path: undefined
|
|
227
231
|
})),
|
|
228
232
|
rowCount: rootRowCount
|
|
229
|
-
}
|
|
233
|
+
}, aggregateRow ? {
|
|
234
|
+
aggregateRow
|
|
235
|
+
} : {});
|
|
230
236
|
} else {
|
|
231
237
|
const {
|
|
232
238
|
returnedRows,
|
|
233
239
|
nextCursor,
|
|
234
|
-
totalRowCount
|
|
240
|
+
totalRowCount,
|
|
241
|
+
aggregateRow
|
|
235
242
|
} = await (0, _serverUtils.loadServerRows)(data?.rows ?? [], (0, _extends2.default)({}, params, params.paginationModel), serverOptionsWithDefault, columnsWithDefaultColDef);
|
|
236
|
-
getRowsResponse = {
|
|
243
|
+
getRowsResponse = (0, _extends2.default)({
|
|
237
244
|
rows: returnedRows,
|
|
238
245
|
rowCount: totalRowCount,
|
|
239
246
|
pageInfo: {
|
|
240
247
|
nextCursor
|
|
241
248
|
}
|
|
242
|
-
}
|
|
249
|
+
}, aggregateRow ? {
|
|
250
|
+
aggregateRow
|
|
251
|
+
} : {});
|
|
243
252
|
}
|
|
244
253
|
return new Promise(resolve => {
|
|
245
254
|
if (verbose) {
|
package/node/index.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mui/x-data-grid-generator",
|
|
3
|
-
"version": "8.0.0-alpha.
|
|
3
|
+
"version": "8.0.0-alpha.8",
|
|
4
4
|
"description": "Generate fake data for demo purposes only.",
|
|
5
5
|
"author": "MUI Team",
|
|
6
6
|
"main": "./node/index.js",
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
"chance": "^1.1.12",
|
|
28
28
|
"clsx": "^2.1.1",
|
|
29
29
|
"lru-cache": "^11.0.2",
|
|
30
|
-
"@mui/x-data-grid-premium": "8.0.0-alpha.
|
|
30
|
+
"@mui/x-data-grid-premium": "8.0.0-alpha.8"
|
|
31
31
|
},
|
|
32
32
|
"peerDependencies": {
|
|
33
33
|
"@emotion/react": "^11.9.0",
|