@mui/x-charts-pro 8.18.0 → 8.20.0
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/BarChartPro/BarChartPro.js +6 -1
- package/CHANGELOG.md +175 -0
- package/ChartDataProviderPro/ChartDataProviderPro.js +1 -1
- package/ChartZoomSlider/internals/ChartAxisZoomSliderActiveTrack.js +6 -3
- package/ChartZoomSlider/internals/ChartAxisZoomSliderThumb.js +20 -6
- package/ChartZoomSlider/internals/previews/AreaPreviewPlot.js +1 -1
- package/FunnelChart/funnelAxisPlugin/useChartFunnelAxisRendering.selectors.js +1 -1
- package/LineChartPro/LineChartPro.js +6 -1
- package/SankeyChart/plugins/useSankeyHighlight.selectors.js +10 -10
- package/ScatterChartPro/ScatterChartPro.js +6 -1
- package/esm/BarChartPro/BarChartPro.js +6 -1
- package/esm/ChartDataProviderPro/ChartDataProviderPro.js +1 -1
- package/esm/ChartZoomSlider/internals/ChartAxisZoomSliderActiveTrack.js +6 -3
- package/esm/ChartZoomSlider/internals/ChartAxisZoomSliderThumb.js +20 -6
- package/esm/ChartZoomSlider/internals/previews/AreaPreviewPlot.js +1 -1
- package/esm/FunnelChart/funnelAxisPlugin/useChartFunnelAxisRendering.selectors.js +3 -3
- package/esm/LineChartPro/LineChartPro.js +6 -1
- package/esm/SankeyChart/plugins/useSankeyHighlight.selectors.js +11 -11
- package/esm/ScatterChartPro/ScatterChartPro.js +6 -1
- package/esm/hooks/useFunnelSeries.js +3 -5
- package/esm/hooks/useHeatmapSeries.js +3 -5
- package/esm/hooks/useSankeySeries.js +3 -5
- package/esm/index.js +1 -1
- package/esm/internals/plugins/useChartProZoom/ZoomInteractionConfig.selectors.d.ts +4 -12
- package/esm/internals/plugins/useChartProZoom/ZoomInteractionConfig.selectors.js +5 -4
- package/esm/internals/plugins/useChartProZoom/ZoomInteractionConfig.types.d.ts +17 -2
- package/esm/internals/plugins/useChartProZoom/gestureHooks/usePanOnWheel.d.ts +8 -0
- package/esm/internals/plugins/useChartProZoom/gestureHooks/usePanOnWheel.js +98 -0
- package/esm/internals/plugins/useChartProZoom/gestureHooks/useZoom.utils.d.ts +1 -1
- package/esm/internals/plugins/useChartProZoom/gestureHooks/useZoom.utils.js +2 -2
- package/esm/internals/plugins/useChartProZoom/initializeZoomInteractionConfig.d.ts +2 -1
- package/esm/internals/plugins/useChartProZoom/initializeZoomInteractionConfig.js +38 -5
- package/esm/internals/plugins/useChartProZoom/useChartProZoom.js +9 -3
- package/esm/internals/plugins/useChartProZoom/useChartProZoom.selectors.js +7 -6
- package/esm/utils/index.d.ts +1 -0
- package/esm/utils/index.js +2 -0
- package/hooks/useFunnelSeries.js +2 -5
- package/hooks/useHeatmapSeries.js +2 -5
- package/hooks/useSankeySeries.js +2 -5
- package/index.js +1 -1
- package/internals/plugins/useChartProZoom/ZoomInteractionConfig.selectors.d.ts +4 -12
- package/internals/plugins/useChartProZoom/ZoomInteractionConfig.selectors.js +4 -3
- package/internals/plugins/useChartProZoom/ZoomInteractionConfig.types.d.ts +17 -2
- package/internals/plugins/useChartProZoom/gestureHooks/usePanOnWheel.d.ts +8 -0
- package/internals/plugins/useChartProZoom/gestureHooks/usePanOnWheel.js +105 -0
- package/internals/plugins/useChartProZoom/gestureHooks/useZoom.utils.d.ts +1 -1
- package/internals/plugins/useChartProZoom/gestureHooks/useZoom.utils.js +2 -2
- package/internals/plugins/useChartProZoom/initializeZoomInteractionConfig.d.ts +2 -1
- package/internals/plugins/useChartProZoom/initializeZoomInteractionConfig.js +38 -5
- package/internals/plugins/useChartProZoom/useChartProZoom.js +9 -3
- package/internals/plugins/useChartProZoom/useChartProZoom.selectors.js +6 -5
- package/package.json +6 -6
- package/utils/index.d.ts +1 -0
- package/utils/index.js +16 -0
|
@@ -1446,7 +1446,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
|
|
|
1446
1446
|
* Configuration for zoom interactions.
|
|
1447
1447
|
*/
|
|
1448
1448
|
zoomInteractionConfig: _propTypes.default.shape({
|
|
1449
|
-
pan: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf(['drag', 'pressAndDrag']), _propTypes.default.shape({
|
|
1449
|
+
pan: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf(['drag', 'pressAndDrag', 'wheel']), _propTypes.default.shape({
|
|
1450
1450
|
pointerMode: _propTypes.default.oneOf(['mouse', 'touch']),
|
|
1451
1451
|
requiredKeys: _propTypes.default.arrayOf(_propTypes.default.string),
|
|
1452
1452
|
type: _propTypes.default.oneOf(['drag']).isRequired
|
|
@@ -1454,6 +1454,11 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
|
|
|
1454
1454
|
pointerMode: _propTypes.default.oneOf(['mouse', 'touch']),
|
|
1455
1455
|
requiredKeys: _propTypes.default.arrayOf(_propTypes.default.string),
|
|
1456
1456
|
type: _propTypes.default.oneOf(['pressAndDrag']).isRequired
|
|
1457
|
+
}), _propTypes.default.shape({
|
|
1458
|
+
allowedDirection: _propTypes.default.oneOf(['x', 'xy', 'y']),
|
|
1459
|
+
pointerMode: _propTypes.default.any,
|
|
1460
|
+
requiredKeys: _propTypes.default.arrayOf(_propTypes.default.string),
|
|
1461
|
+
type: _propTypes.default.oneOf(['wheel']).isRequired
|
|
1457
1462
|
})]).isRequired),
|
|
1458
1463
|
zoom: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf(['brush', 'doubleTapReset', 'pinch', 'tapAndDrag', 'wheel']), _propTypes.default.shape({
|
|
1459
1464
|
pointerMode: _propTypes.default.any,
|
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,181 @@
|
|
|
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.20.0
|
|
9
|
+
|
|
10
|
+
_Nov 26, 2025_
|
|
11
|
+
|
|
12
|
+
We'd like to extend a big thank you to the 8 contributors who made this release possible. Here are some highlights ✨:
|
|
13
|
+
|
|
14
|
+
- 🔃 Data Grid tree data now supports row reordering. See the [Drag-and-drop tree data reordering](https://mui.com/x/react-data-grid/tree-data/#drag-and-drop-tree-data-reordering) section for more details.
|
|
15
|
+
- 🐞 Bugfixes
|
|
16
|
+
|
|
17
|
+
The following team members contributed to this release:
|
|
18
|
+
@alexfauquette, @arminmeh, @bernardobelchior, @cherniavskii, @siriwatknp, @JCQuintas, @MBilalShafi, @prakhargupta1
|
|
19
|
+
|
|
20
|
+
### Data Grid
|
|
21
|
+
|
|
22
|
+
#### `@mui/x-data-grid@8.20.0`
|
|
23
|
+
|
|
24
|
+
- [DataGrid] Fix RTL virtualization to display columns when viewport width is larger than the grid (#20409) @siriwatknp
|
|
25
|
+
- [DataGrid] Fix row range selection (#20442) @arminmeh
|
|
26
|
+
- [DataGrid] Initialize data grid core packages (#20276) @cherniavskii
|
|
27
|
+
- [DataGrid] Improve accessibility of the sort icon (#20430) @arminmeh
|
|
28
|
+
- [DataGrid] Use `viewport` as a boundary for the `BasePopper` flip (#20311) @arminmeh
|
|
29
|
+
|
|
30
|
+
#### `@mui/x-data-grid-pro@8.20.0` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
31
|
+
|
|
32
|
+
Same changes as in `@mui/x-data-grid@8.20.0`, plus:
|
|
33
|
+
|
|
34
|
+
- [DataGridPro] Avoid automatic scroll back to the focused header filter after it leaves the viewport (#20416) @arminmeh
|
|
35
|
+
- [DataGridPro] Tree data row reordering (#19401) @MBilalShafi
|
|
36
|
+
|
|
37
|
+
#### `@mui/x-data-grid-premium@8.20.0` [](https://mui.com/r/x-premium-svg-link 'Premium plan')
|
|
38
|
+
|
|
39
|
+
Same changes as in `@mui/x-data-grid-pro@8.20.0`.
|
|
40
|
+
|
|
41
|
+
### Charts
|
|
42
|
+
|
|
43
|
+
#### `@mui/x-charts@8.20.0`
|
|
44
|
+
|
|
45
|
+
- [charts] Fix item tooltip position with node anchor (#20421) @alexfauquette
|
|
46
|
+
- [charts] Fix radar item tooltip closing bug (#20429) @alexfauquette
|
|
47
|
+
- [charts] Move series processing to selector (#20388) @JCQuintas
|
|
48
|
+
- [charts] Prevent pointer out from removing controlled highlight (#20385) @alexfauquette
|
|
49
|
+
|
|
50
|
+
#### `@mui/x-charts-pro@8.20.0` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
51
|
+
|
|
52
|
+
Same changes as in `@mui/x-charts@8.20.0`, plus:
|
|
53
|
+
|
|
54
|
+
- [charts-pro] Fix Content-Security-Policy nonce not being correctly set on export (#20395) @bernardobelchior
|
|
55
|
+
- [charts-pro] Improve vertical zoom slider thumb on mobile (#20439) @bernardobelchior
|
|
56
|
+
- [charts-pro] Provide arguments to the `AreaPlotRoot` styled component (#20414) @arminmeh
|
|
57
|
+
- [charts-pro] Remove grid outside the drawing area (#20412) @alexfauquette
|
|
58
|
+
|
|
59
|
+
#### `@mui/x-charts-premium@8.20.0` [](https://mui.com/r/x-premium-svg-link 'Premium plan')
|
|
60
|
+
|
|
61
|
+
Same changes as in `@mui/x-charts-pro@8.20.0`, plus:
|
|
62
|
+
|
|
63
|
+
- [charts-premium] Add explicit return type to `ChartsRenderer` for better compatibility with React 18 (#20413) @arminmeh
|
|
64
|
+
|
|
65
|
+
### Docs
|
|
66
|
+
|
|
67
|
+
- [docs] Add `llms.txt` link to the sidebar (#20312) @siriwatknp
|
|
68
|
+
- [docs] Add a line chart demo for the Overview section (#20239) @prakhargupta1
|
|
69
|
+
|
|
70
|
+
## 8.19.0
|
|
71
|
+
|
|
72
|
+
_Nov 20, 2025_
|
|
73
|
+
|
|
74
|
+
We'd like to extend a big thank you to the 15 contributors who made this release possible. Here are some highlights ✨:
|
|
75
|
+
|
|
76
|
+
- 🔎 Add pan on `wheel` to the charts zoom
|
|
77
|
+
- ⌨️ Allow opt-in to [tab navigation](https://mui.com/x/react-data-grid/accessibility/#tab-navigation) inside the Data Grid.
|
|
78
|
+
- ⚙️ New way of defining [action columns](https://mui.com/x/react-data-grid/column-definition/#ActionsWithModalGrid.tsx) in the Data Grid that makes it easier to keep `columns` prop stable.
|
|
79
|
+
- 🐞 Bugfixes
|
|
80
|
+
- 📚 Documentation improvements
|
|
81
|
+
|
|
82
|
+
Special thanks go out to these community members for their valuable contributions:
|
|
83
|
+
@lauri865, @noobyogi0010, @sai6855
|
|
84
|
+
|
|
85
|
+
The following team members contributed to this release:
|
|
86
|
+
@alexfauquette, @arminmeh, @bernardobelchior, @cherniavskii, @flaviendelangle, @Janpot, @JCQuintas, @mj12albert, @noraleonte, @rita-codes, @siriwatknp, @ZeeshanTamboli
|
|
87
|
+
|
|
88
|
+
### Data Grid
|
|
89
|
+
|
|
90
|
+
#### `@mui/x-data-grid@8.19.0`
|
|
91
|
+
|
|
92
|
+
- [DataGrid] Add `tabNavigation` prop to control tab navigation in the grid (#20286) @arminmeh
|
|
93
|
+
- [DataGrid] Allow to focus disabled checkbox cells (#19959) @mj12albert
|
|
94
|
+
- [DataGrid] Alternative actions column definition API (#15041) @cherniavskii
|
|
95
|
+
- [DataGrid] Fix failing tests (#20332) @cherniavskii
|
|
96
|
+
- [DataGrid] Prevent Safari 26 error in the event handler (#20369) @arminmeh
|
|
97
|
+
- [DataGrid] Undeprecate the `autoHeight` prop (#20363) @cherniavskii
|
|
98
|
+
- [DataGrid] Fix print export grid dimensions with dynamic row height and print styles (#19835) @cherniavskii
|
|
99
|
+
|
|
100
|
+
#### `@mui/x-data-grid-pro@8.19.0` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
101
|
+
|
|
102
|
+
Same changes as in `@mui/x-data-grid@8.19.0`.
|
|
103
|
+
|
|
104
|
+
#### `@mui/x-data-grid-premium@8.19.0` [](https://mui.com/r/x-premium-svg-link 'Premium plan')
|
|
105
|
+
|
|
106
|
+
Same changes as in `@mui/x-data-grid-pro@8.19.0`, plus:
|
|
107
|
+
|
|
108
|
+
- [DataGridPremium] Fix aggregation with sorting (#19892) @lauri865
|
|
109
|
+
- [DataGridPremium] Lock `ExcelJS` version (#20329) @cherniavskii
|
|
110
|
+
|
|
111
|
+
### Date and Time Pickers
|
|
112
|
+
|
|
113
|
+
#### `@mui/x-date-pickers@8.19.0`
|
|
114
|
+
|
|
115
|
+
- [pickers] Do not loose `slotProps.field.slotProps` (#20322) @flaviendelangle
|
|
116
|
+
|
|
117
|
+
#### `@mui/x-date-pickers-pro@8.19.0` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
118
|
+
|
|
119
|
+
Same changes as in `@mui/x-date-pickers@8.19.0`.
|
|
120
|
+
|
|
121
|
+
### Charts
|
|
122
|
+
|
|
123
|
+
#### `@mui/x-charts@8.19.0`
|
|
124
|
+
|
|
125
|
+
- [charts] Expose `niceDomain` utility (#20250) @bernardobelchior
|
|
126
|
+
- [charts] Fix benchmark regression by downgrading to JSDOM v26 (#20405) @bernardobelchior
|
|
127
|
+
- [charts] Fix Pie Chart keyboard focus highlight (#20358) @JCQuintas
|
|
128
|
+
- [charts] Memoize series selectors (#20326) @JCQuintas
|
|
129
|
+
- [charts] Relax dataset type (#20294) @bernardobelchior
|
|
130
|
+
- [charts] Remove `touch-action: pan-y` when zoom is disabled (#20204) @bernardobelchior
|
|
131
|
+
- [charts] Use `getBBox()` for correct SVG sizes in firefox (#20309) @JCQuintas
|
|
132
|
+
- [charts] Use directly selector from `@mui/x-internals` (#20365) @alexfauquette
|
|
133
|
+
- [charts] Fix unnecessary errors in dev mode (#20380) @JCQuintas
|
|
134
|
+
|
|
135
|
+
#### `@mui/x-charts-pro@8.19.0` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
136
|
+
|
|
137
|
+
Same changes as in `@mui/x-charts@8.19.0`, plus:
|
|
138
|
+
|
|
139
|
+
- [charts-pro] Add pan on `wheel` to zoom (#19998) @JCQuintas
|
|
140
|
+
- [charts-pro] Fix zoom slider preview having an opaque background in dark mode (#20367) @bernardobelchior
|
|
141
|
+
|
|
142
|
+
#### `@mui/x-charts-premium@8.19.0` [](https://mui.com/r/x-premium-svg-link 'Premium plan')
|
|
143
|
+
|
|
144
|
+
Same changes as in `@mui/x-charts-pro@8.19.0`.
|
|
145
|
+
|
|
146
|
+
### Tree View
|
|
147
|
+
|
|
148
|
+
#### `@mui/x-tree-view@8.19.0`
|
|
149
|
+
|
|
150
|
+
- [tree view] Enable lazy load when children count is not know in tree view (#18680) @noobyogi0010
|
|
151
|
+
- [tree view] Fix unwanted behaviors on the item re-ordering (#20368) @flaviendelangle
|
|
152
|
+
|
|
153
|
+
#### `@mui/x-tree-view-pro@8.19.0` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
154
|
+
|
|
155
|
+
Same changes as in `@mui/x-tree-view@8.19.0`.
|
|
156
|
+
|
|
157
|
+
### Codemod
|
|
158
|
+
|
|
159
|
+
#### `@mui/x-codemod@8.19.0`
|
|
160
|
+
|
|
161
|
+
Internal changes.
|
|
162
|
+
|
|
163
|
+
### Docs
|
|
164
|
+
|
|
165
|
+
- [docs] Add minimum Typescript version to migration guide (#20320) @siriwatknp
|
|
166
|
+
- [docs] Fix Autosizing documentation (#20348) @siriwatknp
|
|
167
|
+
- [docs] Fix separator opacity in demo (#20293) @sai6855
|
|
168
|
+
- [docs] Replace deprecated `LoadingButton` with `Button` component (#20208) @Janpot
|
|
169
|
+
|
|
170
|
+
### Core
|
|
171
|
+
|
|
172
|
+
- [code-infra] Add new broken links checker (#20120) @Janpot
|
|
173
|
+
- [code-infra] Disable Codspeed pipeline (#20370) @JCQuintas
|
|
174
|
+
- [code-infra] Optimize `checkMaterialVersion` (#20307) @Janpot
|
|
175
|
+
- [code-infra] Use utils from code-infra for changelog and PR creation (#20406) @brijeshb42
|
|
176
|
+
- [docs-infra] Revert `@docsearch/react` (#20313) @Janpot
|
|
177
|
+
|
|
178
|
+
### Miscellaneous
|
|
179
|
+
|
|
180
|
+
- [test] Fix browser tests skipping some projects (#20318) @cherniavskii
|
|
181
|
+
- [test] Update `use-react-version` pnpm script (#20319) @cherniavskii
|
|
182
|
+
|
|
8
183
|
## 8.18.0
|
|
9
184
|
|
|
10
185
|
<!-- generated comparing v8.17.0..master -->
|
|
@@ -16,7 +16,7 @@ var _material = require("../internals/material");
|
|
|
16
16
|
var _allPlugins = require("../internals/plugins/allPlugins");
|
|
17
17
|
var _useChartDataProviderProProps = require("./useChartDataProviderProProps");
|
|
18
18
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
19
|
-
const releaseInfo = "
|
|
19
|
+
const releaseInfo = "MTc2NDExNTIwMDAwMA==";
|
|
20
20
|
const packageIdentifier = 'x-charts-pro';
|
|
21
21
|
/**
|
|
22
22
|
* Orchestrates the data providers for the chart components and hooks.
|
|
@@ -34,12 +34,15 @@ const ZoomSliderActiveTrackRect = (0, _styles.styled)('rect', {
|
|
|
34
34
|
props: {
|
|
35
35
|
preview: true
|
|
36
36
|
},
|
|
37
|
-
style: {
|
|
38
|
-
fill: 'transparent'
|
|
37
|
+
style: (0, _extends2.default)({
|
|
38
|
+
fill: 'transparent'
|
|
39
|
+
}, theme.applyStyles('dark', {
|
|
40
|
+
fill: 'transparent'
|
|
41
|
+
}), {
|
|
39
42
|
rx: 4,
|
|
40
43
|
ry: 4,
|
|
41
44
|
stroke: theme.palette.grey[500]
|
|
42
|
-
}
|
|
45
|
+
})
|
|
43
46
|
}]
|
|
44
47
|
}));
|
|
45
48
|
function ChartAxisZoomSliderActiveTrack({
|
|
@@ -35,6 +35,10 @@ const Rect = (0, _styles.styled)('rect')(({
|
|
|
35
35
|
cursor: 'ns-resize'
|
|
36
36
|
}
|
|
37
37
|
}));
|
|
38
|
+
function preventDefault(event) {
|
|
39
|
+
event.preventDefault();
|
|
40
|
+
}
|
|
41
|
+
|
|
38
42
|
/**
|
|
39
43
|
* Renders the zoom slider thumb, which is responsible for resizing the zoom range.
|
|
40
44
|
* @internal
|
|
@@ -60,28 +64,38 @@ const ChartAxisZoomSliderThumb = exports.ChartAxisZoomSliderThumb = /*#__PURE__*
|
|
|
60
64
|
React.useEffect(() => {
|
|
61
65
|
const thumb = thumbRef.current;
|
|
62
66
|
if (!thumb) {
|
|
63
|
-
return;
|
|
67
|
+
return () => {};
|
|
64
68
|
}
|
|
69
|
+
|
|
70
|
+
// Prevent scrolling on touch devices when dragging the thumb
|
|
71
|
+
thumb.addEventListener('touchmove', preventDefault, {
|
|
72
|
+
passive: false
|
|
73
|
+
});
|
|
65
74
|
const onPointerMove = (0, _rafThrottle.rafThrottle)(event => {
|
|
66
75
|
onMoveEvent(event);
|
|
67
76
|
});
|
|
68
|
-
const
|
|
77
|
+
const onPointerEnd = event => {
|
|
69
78
|
thumb.removeEventListener('pointermove', onPointerMove);
|
|
70
|
-
thumb.removeEventListener('pointerup',
|
|
79
|
+
thumb.removeEventListener('pointerup', onPointerEnd);
|
|
80
|
+
thumb.removeEventListener('pointercancel', onPointerEnd);
|
|
81
|
+
thumb.releasePointerCapture(event.pointerId);
|
|
71
82
|
};
|
|
72
83
|
const onPointerDown = event => {
|
|
73
84
|
// Prevent text selection when dragging the thumb
|
|
74
85
|
event.preventDefault();
|
|
75
86
|
event.stopPropagation();
|
|
76
87
|
thumb.setPointerCapture(event.pointerId);
|
|
77
|
-
thumb.addEventListener('pointerup', onPointerUp);
|
|
78
88
|
thumb.addEventListener('pointermove', onPointerMove);
|
|
89
|
+
thumb.addEventListener('pointercancel', onPointerEnd);
|
|
90
|
+
thumb.addEventListener('pointerup', onPointerEnd);
|
|
79
91
|
};
|
|
80
92
|
thumb.addEventListener('pointerdown', onPointerDown);
|
|
81
|
-
|
|
82
|
-
// eslint-disable-next-line consistent-return
|
|
83
93
|
return () => {
|
|
84
94
|
thumb.removeEventListener('pointerdown', onPointerDown);
|
|
95
|
+
thumb.removeEventListener('pointermove', onPointerMove);
|
|
96
|
+
thumb.removeEventListener('pointercancel', onPointerEnd);
|
|
97
|
+
thumb.removeEventListener('pointerup', onPointerEnd);
|
|
98
|
+
thumb.removeEventListener('touchmove', preventDefault);
|
|
85
99
|
onPointerMove.clear();
|
|
86
100
|
};
|
|
87
101
|
}, [onMoveEvent, orientation]);
|
|
@@ -9,7 +9,7 @@ var _internals = require("@mui/x-charts/internals");
|
|
|
9
9
|
var _computeAxisValue = require("./computeAxisValue");
|
|
10
10
|
const selectorFunnel = state => state.funnel;
|
|
11
11
|
exports.selectorFunnel = selectorFunnel;
|
|
12
|
-
const selectorFunnelGap = exports.selectorFunnelGap = (0,
|
|
12
|
+
const selectorFunnelGap = exports.selectorFunnelGap = (0, _store.createSelector)(selectorFunnel, funnel => funnel?.gap ?? 0);
|
|
13
13
|
const selectorChartXAxis = exports.selectorChartXAxis = (0, _store.createSelectorMemoized)(_internals.selectorChartRawXAxis, _internals.selectorChartDrawingArea, _internals.selectorChartSeriesProcessed, _internals.selectorChartSeriesConfig, selectorFunnelGap, (axis, drawingArea, formattedSeries, seriesConfig, gap) => (0, _computeAxisValue.computeAxisValue)({
|
|
14
14
|
drawingArea,
|
|
15
15
|
formattedSeries,
|
|
@@ -1448,7 +1448,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
|
|
|
1448
1448
|
* Configuration for zoom interactions.
|
|
1449
1449
|
*/
|
|
1450
1450
|
zoomInteractionConfig: _propTypes.default.shape({
|
|
1451
|
-
pan: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf(['drag', 'pressAndDrag']), _propTypes.default.shape({
|
|
1451
|
+
pan: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf(['drag', 'pressAndDrag', 'wheel']), _propTypes.default.shape({
|
|
1452
1452
|
pointerMode: _propTypes.default.oneOf(['mouse', 'touch']),
|
|
1453
1453
|
requiredKeys: _propTypes.default.arrayOf(_propTypes.default.string),
|
|
1454
1454
|
type: _propTypes.default.oneOf(['drag']).isRequired
|
|
@@ -1456,6 +1456,11 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
|
|
|
1456
1456
|
pointerMode: _propTypes.default.oneOf(['mouse', 'touch']),
|
|
1457
1457
|
requiredKeys: _propTypes.default.arrayOf(_propTypes.default.string),
|
|
1458
1458
|
type: _propTypes.default.oneOf(['pressAndDrag']).isRequired
|
|
1459
|
+
}), _propTypes.default.shape({
|
|
1460
|
+
allowedDirection: _propTypes.default.oneOf(['x', 'xy', 'y']),
|
|
1461
|
+
pointerMode: _propTypes.default.any,
|
|
1462
|
+
requiredKeys: _propTypes.default.arrayOf(_propTypes.default.string),
|
|
1463
|
+
type: _propTypes.default.oneOf(['wheel']).isRequired
|
|
1459
1464
|
})]).isRequired),
|
|
1460
1465
|
zoom: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf(['brush', 'doubleTapReset', 'pinch', 'tapAndDrag', 'wheel']), _propTypes.default.shape({
|
|
1461
1466
|
pointerMode: _propTypes.default.any,
|
|
@@ -4,10 +4,10 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.selectorSankeyHighlightedItem = exports.selectorNodeHighlightConfig = exports.selectorNodeFadeConfig = exports.selectorLinkHighlightConfig = exports.selectorLinkFadeConfig = exports.selectorIsSankeyItemFaded = exports.selectorIsNodeHighlighted = exports.selectorIsLinkHighlighted = void 0;
|
|
7
|
+
var _store = require("@mui/x-internals/store");
|
|
7
8
|
var _internals = require("@mui/x-charts/internals");
|
|
8
9
|
const selectorSankeyHighlight = state => state.highlight;
|
|
9
|
-
const
|
|
10
|
-
const selectorSankeySeries = (0, _internals.createSelector)([selectSeries], series => series.processedSeries.sankey?.series[series.processedSeries.sankey?.seriesOrder[0]] || null);
|
|
10
|
+
const selectorSankeySeries = (0, _store.createSelector)(_internals.selectorChartSeriesProcessed, processedSeries => processedSeries.sankey?.series[processedSeries.sankey?.seriesOrder[0]] || null);
|
|
11
11
|
const DEFAULT_NODE_HIGHLIGHT = 'links';
|
|
12
12
|
const DEFAULT_LINK_HIGHLIGHT = 'links';
|
|
13
13
|
const DEFAULT_FADE = 'none';
|
|
@@ -16,32 +16,32 @@ const DEFAULT_FADE = 'none';
|
|
|
16
16
|
* Get the node highlight configuration from the Sankey series.
|
|
17
17
|
* Defaults to 'nodes' if not specified.
|
|
18
18
|
*/
|
|
19
|
-
const selectorNodeHighlightConfig = exports.selectorNodeHighlightConfig = (0,
|
|
19
|
+
const selectorNodeHighlightConfig = exports.selectorNodeHighlightConfig = (0, _store.createSelector)(selectorSankeySeries, series => series?.nodeOptions?.highlight ?? DEFAULT_NODE_HIGHLIGHT);
|
|
20
20
|
|
|
21
21
|
/**
|
|
22
22
|
* Get the node fade configuration from the Sankey series.
|
|
23
23
|
* Defaults to 'none' if not specified.
|
|
24
24
|
*/
|
|
25
|
-
const selectorNodeFadeConfig = exports.selectorNodeFadeConfig = (0,
|
|
25
|
+
const selectorNodeFadeConfig = exports.selectorNodeFadeConfig = (0, _store.createSelector)(selectorSankeySeries, series => series?.nodeOptions?.fade ?? DEFAULT_FADE);
|
|
26
26
|
|
|
27
27
|
/**
|
|
28
28
|
* Get the link highlight configuration from the Sankey series.
|
|
29
29
|
* Defaults to 'links' if not specified.
|
|
30
30
|
*/
|
|
31
|
-
const selectorLinkHighlightConfig = exports.selectorLinkHighlightConfig = (0,
|
|
31
|
+
const selectorLinkHighlightConfig = exports.selectorLinkHighlightConfig = (0, _store.createSelector)(selectorSankeySeries, series => series?.linkOptions?.highlight ?? DEFAULT_LINK_HIGHLIGHT);
|
|
32
32
|
|
|
33
33
|
/**
|
|
34
34
|
* Get the link fade configuration from the Sankey series.
|
|
35
35
|
* Defaults to 'none' if not specified.
|
|
36
36
|
*/
|
|
37
|
-
const selectorLinkFadeConfig = exports.selectorLinkFadeConfig = (0,
|
|
37
|
+
const selectorLinkFadeConfig = exports.selectorLinkFadeConfig = (0, _store.createSelector)(selectorSankeySeries, series => series?.linkOptions?.fade ?? DEFAULT_FADE);
|
|
38
38
|
|
|
39
39
|
/**
|
|
40
40
|
* Get the currently highlighted item in the Sankey chart.
|
|
41
41
|
* @param {UseSankeyHighlightSignature['state']} state The state of the chart.
|
|
42
42
|
* @returns {SankeyItemIdentifier | null} The highlighted item identifier or null.
|
|
43
43
|
*/
|
|
44
|
-
const selectorSankeyHighlightedItem = exports.selectorSankeyHighlightedItem = (0,
|
|
44
|
+
const selectorSankeyHighlightedItem = exports.selectorSankeyHighlightedItem = (0, _store.createSelector)(selectorSankeyHighlight, highlight => highlight.item);
|
|
45
45
|
|
|
46
46
|
/**
|
|
47
47
|
* Determines if a specific node should be highlighted.
|
|
@@ -49,7 +49,7 @@ const selectorSankeyHighlightedItem = exports.selectorSankeyHighlightedItem = (0
|
|
|
49
49
|
* - It's the highlighted node (unless highlight mode is 'none')
|
|
50
50
|
* - It's connected to a highlighted link (based on linkOptions.highlight)
|
|
51
51
|
*/
|
|
52
|
-
const selectorIsNodeHighlighted = exports.selectorIsNodeHighlighted = (0,
|
|
52
|
+
const selectorIsNodeHighlighted = exports.selectorIsNodeHighlighted = (0, _store.createSelector)(selectorSankeyHighlightedItem, selectorNodeHighlightConfig, selectorLinkHighlightConfig, (highlightedItem, nodeHighlight, linkHighlight, nodeId) => {
|
|
53
53
|
if (!highlightedItem) {
|
|
54
54
|
return false;
|
|
55
55
|
}
|
|
@@ -84,7 +84,7 @@ const selectorIsNodeHighlighted = exports.selectorIsNodeHighlighted = (0, _inter
|
|
|
84
84
|
* - It's the highlighted link (unless highlight mode is 'none')
|
|
85
85
|
* - It's connected to a highlighted node (based on nodeOptions.highlight)
|
|
86
86
|
*/
|
|
87
|
-
const selectorIsLinkHighlighted = exports.selectorIsLinkHighlighted = (0,
|
|
87
|
+
const selectorIsLinkHighlighted = exports.selectorIsLinkHighlighted = (0, _store.createSelector)(selectorSankeyHighlightedItem, selectorNodeHighlightConfig, selectorLinkHighlightConfig, (highlightedItem, nodeHighlight, linkHighlight, link) => {
|
|
88
88
|
if (!highlightedItem) {
|
|
89
89
|
return false;
|
|
90
90
|
}
|
|
@@ -117,7 +117,7 @@ const selectorIsLinkHighlighted = exports.selectorIsLinkHighlighted = (0, _inter
|
|
|
117
117
|
* - This item is not highlighted
|
|
118
118
|
* - The fade mode is 'global' for the highlighted element type
|
|
119
119
|
*/
|
|
120
|
-
const selectorIsSankeyItemFaded = exports.selectorIsSankeyItemFaded = (0,
|
|
120
|
+
const selectorIsSankeyItemFaded = exports.selectorIsSankeyItemFaded = (0, _store.createSelector)(selectorSankeyHighlightedItem, selectorNodeFadeConfig, selectorLinkFadeConfig, (highlightedItem, nodeFade, linkFade, isHighlighted) => {
|
|
121
121
|
if (!highlightedItem || isHighlighted) {
|
|
122
122
|
return false;
|
|
123
123
|
}
|
|
@@ -1430,7 +1430,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
|
|
|
1430
1430
|
* Configuration for zoom interactions.
|
|
1431
1431
|
*/
|
|
1432
1432
|
zoomInteractionConfig: _propTypes.default.shape({
|
|
1433
|
-
pan: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf(['drag', 'pressAndDrag']), _propTypes.default.shape({
|
|
1433
|
+
pan: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf(['drag', 'pressAndDrag', 'wheel']), _propTypes.default.shape({
|
|
1434
1434
|
pointerMode: _propTypes.default.oneOf(['mouse', 'touch']),
|
|
1435
1435
|
requiredKeys: _propTypes.default.arrayOf(_propTypes.default.string),
|
|
1436
1436
|
type: _propTypes.default.oneOf(['drag']).isRequired
|
|
@@ -1438,6 +1438,11 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
|
|
|
1438
1438
|
pointerMode: _propTypes.default.oneOf(['mouse', 'touch']),
|
|
1439
1439
|
requiredKeys: _propTypes.default.arrayOf(_propTypes.default.string),
|
|
1440
1440
|
type: _propTypes.default.oneOf(['pressAndDrag']).isRequired
|
|
1441
|
+
}), _propTypes.default.shape({
|
|
1442
|
+
allowedDirection: _propTypes.default.oneOf(['x', 'xy', 'y']),
|
|
1443
|
+
pointerMode: _propTypes.default.any,
|
|
1444
|
+
requiredKeys: _propTypes.default.arrayOf(_propTypes.default.string),
|
|
1445
|
+
type: _propTypes.default.oneOf(['wheel']).isRequired
|
|
1441
1446
|
})]).isRequired),
|
|
1442
1447
|
zoom: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf(['brush', 'doubleTapReset', 'pinch', 'tapAndDrag', 'wheel']), _propTypes.default.shape({
|
|
1443
1448
|
pointerMode: _propTypes.default.any,
|
|
@@ -1439,7 +1439,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
|
|
|
1439
1439
|
* Configuration for zoom interactions.
|
|
1440
1440
|
*/
|
|
1441
1441
|
zoomInteractionConfig: PropTypes.shape({
|
|
1442
|
-
pan: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(['drag', 'pressAndDrag']), PropTypes.shape({
|
|
1442
|
+
pan: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(['drag', 'pressAndDrag', 'wheel']), PropTypes.shape({
|
|
1443
1443
|
pointerMode: PropTypes.oneOf(['mouse', 'touch']),
|
|
1444
1444
|
requiredKeys: PropTypes.arrayOf(PropTypes.string),
|
|
1445
1445
|
type: PropTypes.oneOf(['drag']).isRequired
|
|
@@ -1447,6 +1447,11 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
|
|
|
1447
1447
|
pointerMode: PropTypes.oneOf(['mouse', 'touch']),
|
|
1448
1448
|
requiredKeys: PropTypes.arrayOf(PropTypes.string),
|
|
1449
1449
|
type: PropTypes.oneOf(['pressAndDrag']).isRequired
|
|
1450
|
+
}), PropTypes.shape({
|
|
1451
|
+
allowedDirection: PropTypes.oneOf(['x', 'xy', 'y']),
|
|
1452
|
+
pointerMode: PropTypes.any,
|
|
1453
|
+
requiredKeys: PropTypes.arrayOf(PropTypes.string),
|
|
1454
|
+
type: PropTypes.oneOf(['wheel']).isRequired
|
|
1450
1455
|
})]).isRequired),
|
|
1451
1456
|
zoom: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(['brush', 'doubleTapReset', 'pinch', 'tapAndDrag', 'wheel']), PropTypes.shape({
|
|
1452
1457
|
pointerMode: PropTypes.any,
|
|
@@ -10,7 +10,7 @@ import { defaultSlotsMaterial } from "../internals/material/index.js";
|
|
|
10
10
|
import { DEFAULT_PLUGINS } from "../internals/plugins/allPlugins.js";
|
|
11
11
|
import { useChartDataProviderProProps } from "./useChartDataProviderProProps.js";
|
|
12
12
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
|
-
const releaseInfo = "
|
|
13
|
+
const releaseInfo = "MTc2NDExNTIwMDAwMA==";
|
|
14
14
|
const packageIdentifier = 'x-charts-pro';
|
|
15
15
|
/**
|
|
16
16
|
* Orchestrates the data providers for the chart components and hooks.
|
|
@@ -27,12 +27,15 @@ const ZoomSliderActiveTrackRect = styled('rect', {
|
|
|
27
27
|
props: {
|
|
28
28
|
preview: true
|
|
29
29
|
},
|
|
30
|
-
style: {
|
|
31
|
-
fill: 'transparent'
|
|
30
|
+
style: _extends({
|
|
31
|
+
fill: 'transparent'
|
|
32
|
+
}, theme.applyStyles('dark', {
|
|
33
|
+
fill: 'transparent'
|
|
34
|
+
}), {
|
|
32
35
|
rx: 4,
|
|
33
36
|
ry: 4,
|
|
34
37
|
stroke: theme.palette.grey[500]
|
|
35
|
-
}
|
|
38
|
+
})
|
|
36
39
|
}]
|
|
37
40
|
}));
|
|
38
41
|
export function ChartAxisZoomSliderActiveTrack({
|
|
@@ -28,6 +28,10 @@ const Rect = styled('rect')(({
|
|
|
28
28
|
cursor: 'ns-resize'
|
|
29
29
|
}
|
|
30
30
|
}));
|
|
31
|
+
function preventDefault(event) {
|
|
32
|
+
event.preventDefault();
|
|
33
|
+
}
|
|
34
|
+
|
|
31
35
|
/**
|
|
32
36
|
* Renders the zoom slider thumb, which is responsible for resizing the zoom range.
|
|
33
37
|
* @internal
|
|
@@ -53,28 +57,38 @@ export const ChartAxisZoomSliderThumb = /*#__PURE__*/React.forwardRef(function C
|
|
|
53
57
|
React.useEffect(() => {
|
|
54
58
|
const thumb = thumbRef.current;
|
|
55
59
|
if (!thumb) {
|
|
56
|
-
return;
|
|
60
|
+
return () => {};
|
|
57
61
|
}
|
|
62
|
+
|
|
63
|
+
// Prevent scrolling on touch devices when dragging the thumb
|
|
64
|
+
thumb.addEventListener('touchmove', preventDefault, {
|
|
65
|
+
passive: false
|
|
66
|
+
});
|
|
58
67
|
const onPointerMove = rafThrottle(event => {
|
|
59
68
|
onMoveEvent(event);
|
|
60
69
|
});
|
|
61
|
-
const
|
|
70
|
+
const onPointerEnd = event => {
|
|
62
71
|
thumb.removeEventListener('pointermove', onPointerMove);
|
|
63
|
-
thumb.removeEventListener('pointerup',
|
|
72
|
+
thumb.removeEventListener('pointerup', onPointerEnd);
|
|
73
|
+
thumb.removeEventListener('pointercancel', onPointerEnd);
|
|
74
|
+
thumb.releasePointerCapture(event.pointerId);
|
|
64
75
|
};
|
|
65
76
|
const onPointerDown = event => {
|
|
66
77
|
// Prevent text selection when dragging the thumb
|
|
67
78
|
event.preventDefault();
|
|
68
79
|
event.stopPropagation();
|
|
69
80
|
thumb.setPointerCapture(event.pointerId);
|
|
70
|
-
thumb.addEventListener('pointerup', onPointerUp);
|
|
71
81
|
thumb.addEventListener('pointermove', onPointerMove);
|
|
82
|
+
thumb.addEventListener('pointercancel', onPointerEnd);
|
|
83
|
+
thumb.addEventListener('pointerup', onPointerEnd);
|
|
72
84
|
};
|
|
73
85
|
thumb.addEventListener('pointerdown', onPointerDown);
|
|
74
|
-
|
|
75
|
-
// eslint-disable-next-line consistent-return
|
|
76
86
|
return () => {
|
|
77
87
|
thumb.removeEventListener('pointerdown', onPointerDown);
|
|
88
|
+
thumb.removeEventListener('pointermove', onPointerMove);
|
|
89
|
+
thumb.removeEventListener('pointercancel', onPointerEnd);
|
|
90
|
+
thumb.removeEventListener('pointerup', onPointerEnd);
|
|
91
|
+
thumb.removeEventListener('touchmove', preventDefault);
|
|
78
92
|
onPointerMove.clear();
|
|
79
93
|
};
|
|
80
94
|
}, [onMoveEvent, orientation]);
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { createSelectorMemoized } from '@mui/x-internals/store';
|
|
2
|
-
import {
|
|
1
|
+
import { createSelector, createSelectorMemoized } from '@mui/x-internals/store';
|
|
2
|
+
import { selectorChartSeriesConfig, selectorChartSeriesProcessed, selectorChartDrawingArea, selectorChartRawXAxis, selectorChartRawYAxis } from '@mui/x-charts/internals';
|
|
3
3
|
import { computeAxisValue } from "./computeAxisValue.js";
|
|
4
4
|
export const selectorFunnel = state => state.funnel;
|
|
5
|
-
export const selectorFunnelGap = createSelector(
|
|
5
|
+
export const selectorFunnelGap = createSelector(selectorFunnel, funnel => funnel?.gap ?? 0);
|
|
6
6
|
export const selectorChartXAxis = createSelectorMemoized(selectorChartRawXAxis, selectorChartDrawingArea, selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorFunnelGap, (axis, drawingArea, formattedSeries, seriesConfig, gap) => computeAxisValue({
|
|
7
7
|
drawingArea,
|
|
8
8
|
formattedSeries,
|
|
@@ -1441,7 +1441,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
|
|
|
1441
1441
|
* Configuration for zoom interactions.
|
|
1442
1442
|
*/
|
|
1443
1443
|
zoomInteractionConfig: PropTypes.shape({
|
|
1444
|
-
pan: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(['drag', 'pressAndDrag']), PropTypes.shape({
|
|
1444
|
+
pan: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(['drag', 'pressAndDrag', 'wheel']), PropTypes.shape({
|
|
1445
1445
|
pointerMode: PropTypes.oneOf(['mouse', 'touch']),
|
|
1446
1446
|
requiredKeys: PropTypes.arrayOf(PropTypes.string),
|
|
1447
1447
|
type: PropTypes.oneOf(['drag']).isRequired
|
|
@@ -1449,6 +1449,11 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
|
|
|
1449
1449
|
pointerMode: PropTypes.oneOf(['mouse', 'touch']),
|
|
1450
1450
|
requiredKeys: PropTypes.arrayOf(PropTypes.string),
|
|
1451
1451
|
type: PropTypes.oneOf(['pressAndDrag']).isRequired
|
|
1452
|
+
}), PropTypes.shape({
|
|
1453
|
+
allowedDirection: PropTypes.oneOf(['x', 'xy', 'y']),
|
|
1454
|
+
pointerMode: PropTypes.any,
|
|
1455
|
+
requiredKeys: PropTypes.arrayOf(PropTypes.string),
|
|
1456
|
+
type: PropTypes.oneOf(['wheel']).isRequired
|
|
1452
1457
|
})]).isRequired),
|
|
1453
1458
|
zoom: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(['brush', 'doubleTapReset', 'pinch', 'tapAndDrag', 'wheel']), PropTypes.shape({
|
|
1454
1459
|
pointerMode: PropTypes.any,
|