@mui/x-charts-pro 8.0.0-alpha.7 → 8.0.0-alpha.9

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.
Files changed (169) hide show
  1. package/BarChartPro/BarChartPro.d.ts +2 -2
  2. package/BarChartPro/BarChartPro.js +55 -20
  3. package/CHANGELOG.md +551 -3
  4. package/ChartContainerPro/ChartContainerPro.d.ts +33 -4
  5. package/ChartContainerPro/ChartContainerPro.js +52 -27
  6. package/ChartContainerPro/useChartContainerProProps.d.ts +6 -5
  7. package/ChartContainerPro/useChartContainerProProps.js +11 -5
  8. package/ChartDataProviderPro/ChartDataProviderPro.d.ts +37 -0
  9. package/ChartDataProviderPro/ChartDataProviderPro.js +292 -0
  10. package/{context → ChartDataProviderPro}/package.json +1 -1
  11. package/ChartDataProviderPro/useChartDataProviderProProps.d.ts +8 -0
  12. package/ChartDataProviderPro/useChartDataProviderProProps.js +17 -0
  13. package/Heatmap/Heatmap.js +28 -2
  14. package/Heatmap/HeatmapTooltip.js +6 -4
  15. package/Heatmap/extremums.d.ts +2 -2
  16. package/Heatmap/formatter.d.ts +2 -2
  17. package/Heatmap/formatter.js +2 -1
  18. package/Heatmap/plugin.d.ts +2 -2
  19. package/Heatmap/plugin.js +2 -2
  20. package/LineChartPro/LineChartPro.d.ts +2 -2
  21. package/LineChartPro/LineChartPro.js +58 -37
  22. package/ScatterChartPro/ScatterChartPro.d.ts +2 -2
  23. package/ScatterChartPro/ScatterChartPro.js +36 -28
  24. package/hooks/index.d.ts +1 -0
  25. package/hooks/index.js +2 -1
  26. package/hooks/zoom/index.d.ts +1 -0
  27. package/hooks/zoom/index.js +1 -0
  28. package/hooks/zoom/useIsZoomInteracting.d.ts +6 -0
  29. package/hooks/zoom/useIsZoomInteracting.js +14 -0
  30. package/index.d.ts +3 -1
  31. package/index.js +5 -5
  32. package/internals/plugins/allPlugins.d.ts +10 -0
  33. package/internals/plugins/allPlugins.js +5 -0
  34. package/internals/plugins/useChartProZoom/creatZoomLookup.d.ts +3 -0
  35. package/internals/plugins/useChartProZoom/creatZoomLookup.js +12 -0
  36. package/internals/plugins/useChartProZoom/defaultizeZoom.d.ts +2 -0
  37. package/internals/plugins/useChartProZoom/defaultizeZoom.js +25 -0
  38. package/internals/plugins/useChartProZoom/index.d.ts +3 -0
  39. package/internals/plugins/useChartProZoom/index.js +3 -0
  40. package/internals/plugins/useChartProZoom/useChartProZoom.d.ts +3 -0
  41. package/internals/plugins/useChartProZoom/useChartProZoom.js +303 -0
  42. package/internals/plugins/useChartProZoom/useChartProZoom.selectors.d.ts +377 -0
  43. package/internals/plugins/useChartProZoom/useChartProZoom.selectors.js +10 -0
  44. package/internals/plugins/useChartProZoom/useChartProZoom.types.d.ts +50 -0
  45. package/internals/plugins/useChartProZoom/useChartProZoom.utils.d.ts +45 -0
  46. package/internals/plugins/useChartProZoom/useChartProZoom.utils.js +126 -0
  47. package/internals/plugins/useChartProZoom/zoom.types.d.ts +53 -0
  48. package/internals/utils/releaseInfo.js +1 -1
  49. package/models/index.d.ts +1 -0
  50. package/models/index.js +2 -1
  51. package/modern/BarChartPro/BarChartPro.js +55 -20
  52. package/modern/ChartContainerPro/ChartContainerPro.js +52 -27
  53. package/modern/ChartContainerPro/useChartContainerProProps.js +11 -5
  54. package/modern/ChartDataProviderPro/ChartDataProviderPro.js +292 -0
  55. package/modern/ChartDataProviderPro/useChartDataProviderProProps.js +17 -0
  56. package/modern/Heatmap/Heatmap.js +28 -2
  57. package/modern/Heatmap/HeatmapTooltip.js +6 -4
  58. package/modern/Heatmap/formatter.js +2 -1
  59. package/modern/Heatmap/plugin.js +2 -2
  60. package/modern/LineChartPro/LineChartPro.js +58 -37
  61. package/modern/ScatterChartPro/ScatterChartPro.js +36 -28
  62. package/modern/hooks/index.js +2 -1
  63. package/modern/hooks/zoom/index.js +1 -0
  64. package/modern/hooks/zoom/useIsZoomInteracting.js +14 -0
  65. package/modern/index.js +5 -5
  66. package/modern/internals/plugins/allPlugins.js +5 -0
  67. package/modern/internals/plugins/useChartProZoom/creatZoomLookup.js +12 -0
  68. package/modern/internals/plugins/useChartProZoom/defaultizeZoom.js +25 -0
  69. package/modern/internals/plugins/useChartProZoom/index.js +3 -0
  70. package/modern/internals/plugins/useChartProZoom/useChartProZoom.js +303 -0
  71. package/modern/internals/plugins/useChartProZoom/useChartProZoom.selectors.js +10 -0
  72. package/modern/internals/plugins/useChartProZoom/useChartProZoom.types.js +1 -0
  73. package/modern/internals/plugins/useChartProZoom/useChartProZoom.utils.js +126 -0
  74. package/modern/internals/plugins/useChartProZoom/zoom.types.js +1 -0
  75. package/modern/internals/utils/releaseInfo.js +1 -1
  76. package/modern/models/index.js +2 -1
  77. package/node/BarChartPro/BarChartPro.js +55 -20
  78. package/node/ChartContainerPro/ChartContainerPro.js +51 -26
  79. package/node/ChartContainerPro/useChartContainerProProps.js +11 -5
  80. package/node/ChartDataProviderPro/ChartDataProviderPro.js +298 -0
  81. package/node/ChartDataProviderPro/useChartDataProviderProProps.js +23 -0
  82. package/node/Heatmap/Heatmap.js +28 -2
  83. package/node/Heatmap/HeatmapTooltip.js +4 -2
  84. package/node/Heatmap/formatter.js +2 -1
  85. package/node/Heatmap/plugin.js +2 -2
  86. package/node/LineChartPro/LineChartPro.js +58 -37
  87. package/node/ScatterChartPro/ScatterChartPro.js +36 -28
  88. package/node/hooks/index.js +16 -1
  89. package/node/{context/CartesianProviderPro → hooks/zoom}/index.js +4 -4
  90. package/node/hooks/zoom/useIsZoomInteracting.js +19 -0
  91. package/node/index.js +34 -12
  92. package/node/internals/plugins/allPlugins.js +11 -0
  93. package/node/internals/plugins/useChartProZoom/creatZoomLookup.js +19 -0
  94. package/node/internals/plugins/useChartProZoom/defaultizeZoom.js +33 -0
  95. package/node/internals/plugins/useChartProZoom/index.js +38 -0
  96. package/node/internals/plugins/useChartProZoom/useChartProZoom.js +310 -0
  97. package/node/internals/plugins/useChartProZoom/useChartProZoom.selectors.js +18 -0
  98. package/node/internals/plugins/useChartProZoom/useChartProZoom.utils.js +140 -0
  99. package/node/internals/plugins/useChartProZoom/zoom.types.js +5 -0
  100. package/node/internals/utils/releaseInfo.js +1 -1
  101. package/package.json +5 -5
  102. package/typeOverloads/modules.d.ts +8 -1
  103. package/context/CartesianProviderPro/CartesianProviderPro.d.ts +0 -6
  104. package/context/CartesianProviderPro/CartesianProviderPro.js +0 -89
  105. package/context/CartesianProviderPro/createAxisFilterMapper.d.ts +0 -13
  106. package/context/CartesianProviderPro/createAxisFilterMapper.js +0 -60
  107. package/context/CartesianProviderPro/index.d.ts +0 -1
  108. package/context/CartesianProviderPro/index.js +0 -1
  109. package/context/ChartDataProviderPro/ChartDataProviderPro.d.ts +0 -7
  110. package/context/ChartDataProviderPro/ChartDataProviderPro.js +0 -50
  111. package/context/ChartDataProviderPro/useChartDataProviderProProps.d.ts +0 -14
  112. package/context/ChartDataProviderPro/useChartDataProviderProProps.js +0 -43
  113. package/context/ZoomProvider/Zoom.types.d.ts +0 -144
  114. package/context/ZoomProvider/ZoomContext.d.ts +0 -4
  115. package/context/ZoomProvider/ZoomContext.js +0 -16
  116. package/context/ZoomProvider/ZoomProvider.d.ts +0 -3
  117. package/context/ZoomProvider/ZoomProvider.js +0 -56
  118. package/context/ZoomProvider/ZoomSetup.d.ts +0 -9
  119. package/context/ZoomProvider/ZoomSetup.js +0 -16
  120. package/context/ZoomProvider/defaultizeZoom.d.ts +0 -2
  121. package/context/ZoomProvider/defaultizeZoom.js +0 -32
  122. package/context/ZoomProvider/index.d.ts +0 -3
  123. package/context/ZoomProvider/index.js +0 -3
  124. package/context/ZoomProvider/initializeZoomData.d.ts +0 -6
  125. package/context/ZoomProvider/initializeZoomData.js +0 -13
  126. package/context/ZoomProvider/useSetupPan.d.ts +0 -1
  127. package/context/ZoomProvider/useSetupPan.js +0 -106
  128. package/context/ZoomProvider/useSetupZoom.d.ts +0 -1
  129. package/context/ZoomProvider/useSetupZoom.js +0 -274
  130. package/context/ZoomProvider/useZoom.d.ts +0 -7
  131. package/context/ZoomProvider/useZoom.js +0 -19
  132. package/context/index.d.ts +0 -3
  133. package/context/index.js +0 -5
  134. package/modern/context/CartesianProviderPro/CartesianProviderPro.js +0 -89
  135. package/modern/context/CartesianProviderPro/createAxisFilterMapper.js +0 -60
  136. package/modern/context/CartesianProviderPro/index.js +0 -1
  137. package/modern/context/ChartDataProviderPro/ChartDataProviderPro.js +0 -50
  138. package/modern/context/ChartDataProviderPro/useChartDataProviderProProps.js +0 -43
  139. package/modern/context/ZoomProvider/ZoomContext.js +0 -16
  140. package/modern/context/ZoomProvider/ZoomProvider.js +0 -56
  141. package/modern/context/ZoomProvider/ZoomSetup.js +0 -16
  142. package/modern/context/ZoomProvider/defaultizeZoom.js +0 -32
  143. package/modern/context/ZoomProvider/index.js +0 -3
  144. package/modern/context/ZoomProvider/initializeZoomData.js +0 -13
  145. package/modern/context/ZoomProvider/useSetupPan.js +0 -106
  146. package/modern/context/ZoomProvider/useSetupZoom.js +0 -274
  147. package/modern/context/ZoomProvider/useZoom.js +0 -19
  148. package/modern/context/index.js +0 -5
  149. package/node/context/CartesianProviderPro/CartesianProviderPro.js +0 -95
  150. package/node/context/CartesianProviderPro/createAxisFilterMapper.js +0 -68
  151. package/node/context/ChartDataProviderPro/ChartDataProviderPro.js +0 -56
  152. package/node/context/ChartDataProviderPro/useChartDataProviderProProps.js +0 -50
  153. package/node/context/ZoomProvider/ZoomContext.js +0 -23
  154. package/node/context/ZoomProvider/ZoomProvider.js +0 -63
  155. package/node/context/ZoomProvider/ZoomSetup.js +0 -20
  156. package/node/context/ZoomProvider/defaultizeZoom.js +0 -40
  157. package/node/context/ZoomProvider/index.js +0 -38
  158. package/node/context/ZoomProvider/initializeZoomData.js +0 -20
  159. package/node/context/ZoomProvider/useSetupPan.js +0 -114
  160. package/node/context/ZoomProvider/useSetupZoom.js +0 -281
  161. package/node/context/ZoomProvider/useZoom.js +0 -25
  162. package/node/context/index.js +0 -27
  163. /package/{context/ChartDataProviderPro → ChartDataProviderPro}/index.d.ts +0 -0
  164. /package/{context/ChartDataProviderPro → ChartDataProviderPro}/index.js +0 -0
  165. /package/{context/ZoomProvider/Zoom.types.js → internals/plugins/useChartProZoom/useChartProZoom.types.js} +0 -0
  166. /package/{modern/context/ZoomProvider/Zoom.types.js → internals/plugins/useChartProZoom/zoom.types.js} +0 -0
  167. /package/modern/{context/ChartDataProviderPro → ChartDataProviderPro}/index.js +0 -0
  168. /package/node/{context/ChartDataProviderPro → ChartDataProviderPro}/index.js +0 -0
  169. /package/node/{context/ZoomProvider/Zoom.types.js → internals/plugins/useChartProZoom/useChartProZoom.types.js} +0 -0
@@ -1,274 +0,0 @@
1
- 'use client';
2
-
3
- import * as React from 'react';
4
- import { useDrawingArea, useSvgRef } from '@mui/x-charts/hooks';
5
- import { getSVGPoint } from '@mui/x-charts/internals';
6
- import { useZoom } from "./useZoom.js";
7
- /**
8
- * Helper to get the range (in percents of a reference range) corresponding to a given scale.
9
- * @param centerRatio {number} The ratio of the point that should not move between the previous and next range.
10
- * @param scaleRatio {number} The target scale ratio.
11
- * @returns The range to display.
12
- */
13
- const zoomAtPoint = (centerRatio, scaleRatio, currentZoomData, options) => {
14
- const MIN_RANGE = options.minStart;
15
- const MAX_RANGE = options.maxEnd;
16
- const MIN_ALLOWED_SPAN = options.minSpan;
17
- const minRange = currentZoomData.start;
18
- const maxRange = currentZoomData.end;
19
- const point = minRange + centerRatio * (maxRange - minRange);
20
- let newMinRange = (minRange + point * (scaleRatio - 1)) / scaleRatio;
21
- let newMaxRange = (maxRange + point * (scaleRatio - 1)) / scaleRatio;
22
- let minSpillover = 0;
23
- let maxSpillover = 0;
24
- if (newMinRange < MIN_RANGE) {
25
- minSpillover = Math.abs(newMinRange);
26
- newMinRange = MIN_RANGE;
27
- }
28
- if (newMaxRange > MAX_RANGE) {
29
- maxSpillover = Math.abs(newMaxRange - MAX_RANGE);
30
- newMaxRange = MAX_RANGE;
31
- }
32
- if (minSpillover > 0 && maxSpillover > 0) {
33
- return [MIN_RANGE, MAX_RANGE];
34
- }
35
- newMaxRange += minSpillover;
36
- newMinRange -= maxSpillover;
37
- newMinRange = Math.min(MAX_RANGE - MIN_ALLOWED_SPAN, Math.max(MIN_RANGE, newMinRange));
38
- newMaxRange = Math.max(MIN_ALLOWED_SPAN, Math.min(MAX_RANGE, newMaxRange));
39
- return [newMinRange, newMaxRange];
40
- };
41
- export const useSetupZoom = () => {
42
- const {
43
- setZoomData,
44
- isZoomEnabled,
45
- options,
46
- setIsInteracting
47
- } = useZoom();
48
- const drawingArea = useDrawingArea();
49
- const svgRef = useSvgRef();
50
- const eventCacheRef = React.useRef([]);
51
- const eventPrevDiff = React.useRef(0);
52
- const interactionTimeoutRef = React.useRef(undefined);
53
- React.useEffect(() => {
54
- const element = svgRef.current;
55
- if (element === null || !isZoomEnabled) {
56
- return () => {};
57
- }
58
- const wheelHandler = event => {
59
- if (element === null) {
60
- return;
61
- }
62
- const point = getSVGPoint(element, event);
63
- if (!drawingArea.isPointInside(point)) {
64
- return;
65
- }
66
- event.preventDefault();
67
- if (interactionTimeoutRef.current) {
68
- clearTimeout(interactionTimeoutRef.current);
69
- }
70
- setIsInteracting(true);
71
- // Debounce transition to `isInteractive=false`.
72
- // Useful because wheel events don't have an "end" event.
73
- interactionTimeoutRef.current = window.setTimeout(() => {
74
- setIsInteracting(false);
75
- }, 166);
76
- setZoomData(prevZoomData => {
77
- return prevZoomData.map(zoom => {
78
- const option = options[zoom.axisId];
79
- if (!option) {
80
- return zoom;
81
- }
82
- const centerRatio = option.axisDirection === 'x' ? getHorizontalCenterRatio(point, drawingArea) : getVerticalCenterRatio(point, drawingArea);
83
- const {
84
- scaleRatio,
85
- isZoomIn
86
- } = getWheelScaleRatio(event, option.step);
87
- const [newMinRange, newMaxRange] = zoomAtPoint(centerRatio, scaleRatio, zoom, option);
88
- if (!isSpanValid(newMinRange, newMaxRange, isZoomIn, option)) {
89
- return zoom;
90
- }
91
- return {
92
- axisId: zoom.axisId,
93
- start: newMinRange,
94
- end: newMaxRange
95
- };
96
- });
97
- });
98
- };
99
- function pointerDownHandler(event) {
100
- eventCacheRef.current.push(event);
101
- setIsInteracting(true);
102
- }
103
- function pointerMoveHandler(event) {
104
- if (element === null) {
105
- return;
106
- }
107
- const index = eventCacheRef.current.findIndex(cachedEv => cachedEv.pointerId === event.pointerId);
108
- eventCacheRef.current[index] = event;
109
-
110
- // Not a pinch gesture
111
- if (eventCacheRef.current.length !== 2) {
112
- return;
113
- }
114
- const firstEvent = eventCacheRef.current[0];
115
- const curDiff = getDiff(eventCacheRef.current);
116
- setZoomData(prevZoomData => {
117
- const newZoomData = prevZoomData.map(zoom => {
118
- const option = options[zoom.axisId];
119
- if (!option) {
120
- return zoom;
121
- }
122
- const {
123
- scaleRatio,
124
- isZoomIn
125
- } = getPinchScaleRatio(curDiff, eventPrevDiff.current, option.step);
126
-
127
- // If the scale ratio is 0, it means the pinch gesture is not valid.
128
- if (scaleRatio === 0) {
129
- return zoom;
130
- }
131
- const point = getSVGPoint(element, firstEvent);
132
- const centerRatio = option.axisDirection === 'x' ? getHorizontalCenterRatio(point, drawingArea) : getVerticalCenterRatio(point, drawingArea);
133
- const [newMinRange, newMaxRange] = zoomAtPoint(centerRatio, scaleRatio, zoom, option);
134
- if (!isSpanValid(newMinRange, newMaxRange, isZoomIn, option)) {
135
- return zoom;
136
- }
137
- return {
138
- axisId: zoom.axisId,
139
- start: newMinRange,
140
- end: newMaxRange
141
- };
142
- });
143
- eventPrevDiff.current = curDiff;
144
- return newZoomData;
145
- });
146
- }
147
- function pointerUpHandler(event) {
148
- eventCacheRef.current.splice(eventCacheRef.current.findIndex(cachedEvent => cachedEvent.pointerId === event.pointerId), 1);
149
- if (eventCacheRef.current.length < 2) {
150
- eventPrevDiff.current = 0;
151
- }
152
- if (event.type === 'pointerup' || event.type === 'pointercancel') {
153
- setIsInteracting(false);
154
- }
155
- }
156
- element.addEventListener('wheel', wheelHandler);
157
- element.addEventListener('pointerdown', pointerDownHandler);
158
- element.addEventListener('pointermove', pointerMoveHandler);
159
- element.addEventListener('pointerup', pointerUpHandler);
160
- element.addEventListener('pointercancel', pointerUpHandler);
161
- element.addEventListener('pointerout', pointerUpHandler);
162
- element.addEventListener('pointerleave', pointerUpHandler);
163
-
164
- // Prevent zooming the entire page on touch devices
165
- element.addEventListener('touchstart', preventDefault);
166
- element.addEventListener('touchmove', preventDefault);
167
- return () => {
168
- element.removeEventListener('wheel', wheelHandler);
169
- element.removeEventListener('pointerdown', pointerDownHandler);
170
- element.removeEventListener('pointermove', pointerMoveHandler);
171
- element.removeEventListener('pointerup', pointerUpHandler);
172
- element.removeEventListener('pointercancel', pointerUpHandler);
173
- element.removeEventListener('pointerout', pointerUpHandler);
174
- element.removeEventListener('pointerleave', pointerUpHandler);
175
- element.removeEventListener('touchstart', preventDefault);
176
- element.removeEventListener('touchmove', preventDefault);
177
- if (interactionTimeoutRef.current) {
178
- clearTimeout(interactionTimeoutRef.current);
179
- }
180
- };
181
- }, [svgRef, setZoomData, drawingArea, isZoomEnabled, options, setIsInteracting]);
182
- };
183
-
184
- /**
185
- * Checks if the new span is valid.
186
- */
187
- function isSpanValid(minRange, maxRange, isZoomIn, option) {
188
- const newSpanPercent = maxRange - minRange;
189
- if (isZoomIn && newSpanPercent < option.minSpan || !isZoomIn && newSpanPercent > option.maxSpan) {
190
- return false;
191
- }
192
- if (minRange < option.minStart || maxRange > option.maxEnd) {
193
- return false;
194
- }
195
- return true;
196
- }
197
- function getMultiplier(event) {
198
- const ctrlMultiplier = event.ctrlKey ? 3 : 1;
199
-
200
- // DeltaMode: 0 is pixel, 1 is line, 2 is page
201
- // This is defined by the browser.
202
- if (event.deltaMode === 1) {
203
- return 1 * ctrlMultiplier;
204
- }
205
- if (event.deltaMode) {
206
- return 10 * ctrlMultiplier;
207
- }
208
- return 0.2 * ctrlMultiplier;
209
- }
210
-
211
- /**
212
- * Get the scale ratio and if it's a zoom in or out from a wheel event.
213
- */
214
- function getWheelScaleRatio(event, step) {
215
- const deltaY = -event.deltaY;
216
- const multiplier = getMultiplier(event);
217
- const scaledStep = step * multiplier * deltaY / 1000;
218
- // Clamp the scale ratio between 0.1 and 1.9 so that the zoom is not too big or too small.
219
- const scaleRatio = Math.min(Math.max(1 + scaledStep, 0.1), 1.9);
220
- const isZoomIn = deltaY > 0;
221
- return {
222
- scaleRatio,
223
- isZoomIn
224
- };
225
- }
226
-
227
- /**
228
- * Get the scale ratio and if it's a zoom in or out from a pinch gesture.
229
- */
230
- function getPinchScaleRatio(curDiff, prevDiff, step) {
231
- const scaledStep = step / 1000;
232
- let scaleRatio = 0;
233
- let isZoomIn = false;
234
- const hasMoved = prevDiff > 0;
235
- if (hasMoved && curDiff > prevDiff) {
236
- // The distance between the two pointers has increased
237
- scaleRatio = 1 + scaledStep;
238
- isZoomIn = true;
239
- }
240
- if (hasMoved && curDiff < prevDiff) {
241
- // The distance between the two pointers has decreased
242
- scaleRatio = 1 - scaledStep;
243
- isZoomIn = false;
244
- }
245
- return {
246
- scaleRatio,
247
- isZoomIn
248
- };
249
- }
250
- function getDiff(eventCache) {
251
- const [firstEvent, secondEvent] = eventCache;
252
- return Math.hypot(firstEvent.pageX - secondEvent.pageX, firstEvent.pageY - secondEvent.pageY);
253
- }
254
-
255
- /**
256
- * Get the ratio of the point in the horizontal center of the area.
257
- */
258
- function getHorizontalCenterRatio(point, area) {
259
- const {
260
- left,
261
- width
262
- } = area;
263
- return (point.x - left) / width;
264
- }
265
- function preventDefault(event) {
266
- event.preventDefault();
267
- }
268
- function getVerticalCenterRatio(point, area) {
269
- const {
270
- top,
271
- height
272
- } = area;
273
- return (point.y - top) / height * -1 + 1;
274
- }
@@ -1,7 +0,0 @@
1
- import { ZoomState } from './Zoom.types';
2
- /**
3
- * Get access to the zoom state.
4
- *
5
- * @returns {ZoomState} The zoom state.
6
- */
7
- export declare function useZoom(): ZoomState;
@@ -1,19 +0,0 @@
1
- 'use client';
2
-
3
- import * as React from 'react';
4
- import { ZoomContext } from "./ZoomContext.js";
5
- /**
6
- * Get access to the zoom state.
7
- *
8
- * @returns {ZoomState} The zoom state.
9
- */
10
- export function useZoom() {
11
- const {
12
- data,
13
- isInitialized
14
- } = React.useContext(ZoomContext);
15
- if (!isInitialized) {
16
- throw new Error(['MUI X: Could not find the zoom context.', 'It looks like you rendered your component outside of a ChartsContainer parent component.'].join('\n'));
17
- }
18
- return data;
19
- }
@@ -1,3 +0,0 @@
1
- export type { ZoomOptions, ZoomData, ZoomProps, ZoomState } from './ZoomProvider/Zoom.types';
2
- export * from './ZoomProvider/useZoom';
3
- export * from './ZoomProvider/ZoomSetup';
package/context/index.js DELETED
@@ -1,5 +0,0 @@
1
- // # Zoom & Pan
2
-
3
- export * from "./ZoomProvider/useZoom.js";
4
- export * from "./ZoomProvider/ZoomSetup.js";
5
- export {};
@@ -1,89 +0,0 @@
1
- 'use client';
2
-
3
- import _extends from "@babel/runtime/helpers/esm/extends";
4
- import * as React from 'react';
5
- import { useDrawingArea, useSeries, CartesianContext, computeAxisValue, useXExtremumGetter, useYExtremumGetter } from '@mui/x-charts/internals';
6
- import { useZoom } from "../ZoomProvider/useZoom.js";
7
- import { createAxisFilterMapper, createGetAxisFilters } from "./createAxisFilterMapper.js";
8
- import { jsx as _jsx } from "react/jsx-runtime";
9
- function CartesianProviderPro(props) {
10
- const {
11
- xAxis,
12
- yAxis,
13
- children
14
- } = props;
15
- const formattedSeries = useSeries();
16
- const drawingArea = useDrawingArea();
17
- const {
18
- zoomData,
19
- options
20
- } = useZoom();
21
- const xExtremumGetters = useXExtremumGetter();
22
- const yExtremumGetters = useYExtremumGetter();
23
- const getFilters = React.useMemo(() => {
24
- const xMapper = createAxisFilterMapper({
25
- zoomData,
26
- extremumGetter: xExtremumGetters,
27
- formattedSeries,
28
- direction: 'x'
29
- });
30
- const yMapper = createAxisFilterMapper({
31
- zoomData,
32
- extremumGetter: yExtremumGetters,
33
- formattedSeries,
34
- direction: 'y'
35
- });
36
- const xFilters = xAxis.reduce((acc, axis, index) => {
37
- const filter = xMapper(axis, index);
38
- if (filter !== null) {
39
- acc[axis.id] = filter;
40
- }
41
- return acc;
42
- }, {});
43
- const yFilters = yAxis.reduce((acc, axis, index) => {
44
- const filter = yMapper(axis, index);
45
- if (filter !== null) {
46
- acc[axis.id] = filter;
47
- }
48
- return acc;
49
- }, {});
50
- if (Object.keys(xFilters).length === 0 && Object.keys(yFilters).length === 0) {
51
- return undefined;
52
- }
53
- return createGetAxisFilters(_extends({}, xFilters, yFilters));
54
- }, [formattedSeries, xAxis, xExtremumGetters, yAxis, yExtremumGetters, zoomData]);
55
- const xValues = React.useMemo(() => computeAxisValue({
56
- drawingArea,
57
- formattedSeries,
58
- axis: xAxis,
59
- extremumGetters: xExtremumGetters,
60
- axisDirection: 'x',
61
- zoomData,
62
- zoomOptions: options,
63
- getFilters
64
- }), [drawingArea, formattedSeries, xAxis, xExtremumGetters, zoomData, options, getFilters]);
65
- const yValues = React.useMemo(() => computeAxisValue({
66
- drawingArea,
67
- formattedSeries,
68
- axis: yAxis,
69
- extremumGetters: yExtremumGetters,
70
- axisDirection: 'y',
71
- zoomData,
72
- zoomOptions: options,
73
- getFilters
74
- }), [drawingArea, formattedSeries, yAxis, yExtremumGetters, zoomData, options, getFilters]);
75
- const value = React.useMemo(() => ({
76
- isInitialized: true,
77
- data: {
78
- xAxis: xValues.axis,
79
- yAxis: yValues.axis,
80
- xAxisIds: xValues.axisIds,
81
- yAxisIds: yValues.axisIds
82
- }
83
- }), [xValues, yValues]);
84
- return /*#__PURE__*/_jsx(CartesianContext.Provider, {
85
- value: value,
86
- children: children
87
- });
88
- }
89
- export { CartesianProviderPro };
@@ -1,60 +0,0 @@
1
- import { getAxisExtremum, isDefined, getScale } from '@mui/x-charts/internals';
2
- export const createAxisFilterMapper = ({
3
- zoomData,
4
- extremumGetter,
5
- formattedSeries,
6
- direction
7
- }) => (axis, axisIndex) => {
8
- if (typeof axis.zoom !== 'object' || axis.zoom.filterMode !== 'discard') {
9
- return null;
10
- }
11
- const zoom = zoomData?.find(({
12
- axisId
13
- }) => axisId === axis.id);
14
- if (zoom === undefined || zoom.start <= 0 && zoom.end >= 100) {
15
- // No zoom, or zoom with all data visible
16
- return null;
17
- }
18
- let extremums = [];
19
- const scaleType = axis.scaleType;
20
- if (scaleType === 'point' || scaleType === 'band') {
21
- extremums = [0, (axis.data?.length ?? 1) - 1];
22
- } else {
23
- extremums = getAxisExtremum(axis, extremumGetter, axisIndex, formattedSeries);
24
- }
25
- let min;
26
- let max;
27
-
28
- // @ts-expect-error The function defaults to linear scale if the scaleType is not recognized.
29
- [min, max] = getScale(scaleType, extremums, [0, 100]).nice().domain();
30
- min = min instanceof Date ? min.getTime() : min;
31
- max = max instanceof Date ? max.getTime() : max;
32
- const minVal = min + zoom.start * (max - min) / 100;
33
- const maxVal = min + zoom.end * (max - min) / 100;
34
- return (value, dataIndex) => {
35
- const val = value[direction] ?? axis.data?.[dataIndex];
36
- if (val == null) {
37
- // If the value does not exist because of missing data point, or out of range index, we just ignore.
38
- return true;
39
- }
40
- if (axis.scaleType === 'point' || axis.scaleType === 'band' || typeof val === 'string') {
41
- return dataIndex >= minVal && dataIndex <= maxVal;
42
- }
43
- return val >= minVal && val <= maxVal;
44
- };
45
- };
46
- export const createGetAxisFilters = filters => ({
47
- currentAxisId,
48
- seriesXAxisId,
49
- seriesYAxisId,
50
- isDefaultAxis
51
- }) => {
52
- return (value, dataIndex) => {
53
- const axisId = currentAxisId === seriesXAxisId ? seriesYAxisId : seriesXAxisId;
54
- if (!axisId || isDefaultAxis) {
55
- return Object.values(filters ?? {})[0]?.(value, dataIndex) ?? true;
56
- }
57
- const data = [seriesYAxisId, seriesXAxisId].filter(id => id !== currentAxisId).map(id => filters[id ?? '']).filter(isDefined);
58
- return data.every(f => f(value, dataIndex));
59
- };
60
- };
@@ -1 +0,0 @@
1
- export * from "./CartesianProviderPro.js";
@@ -1,50 +0,0 @@
1
- 'use client';
2
-
3
- import _extends from "@babel/runtime/helpers/esm/extends";
4
- import * as React from 'react';
5
- import { DrawingAreaProvider, PluginProvider, SeriesProvider, AnimationProvider, SizeProvider, ChartProvider } from '@mui/x-charts/internals';
6
- import { HighlightedProvider, ZAxisContextProvider } from '@mui/x-charts/context';
7
- import { useLicenseVerifier } from '@mui/x-license/useLicenseVerifier';
8
- import { getReleaseInfo } from "../../internals/utils/releaseInfo.js";
9
- import { CartesianProviderPro } from "../CartesianProviderPro/index.js";
10
- import { ZoomProvider } from "../ZoomProvider/index.js";
11
- import { useChartContainerProProps } from "./useChartDataProviderProProps.js";
12
- import { jsx as _jsx } from "react/jsx-runtime";
13
- const releaseInfo = getReleaseInfo();
14
- function ChartDataProviderPro(props) {
15
- const {
16
- zoomProviderProps,
17
- drawingAreaProviderProps,
18
- seriesProviderProps,
19
- zAxisContextProps,
20
- highlightedProviderProps,
21
- cartesianProviderProps,
22
- sizeProviderProps,
23
- pluginProviderProps,
24
- animationProviderProps,
25
- children
26
- } = useChartContainerProProps(props);
27
- useLicenseVerifier('x-charts-pro', releaseInfo);
28
- return /*#__PURE__*/_jsx(ChartProvider, {
29
- children: /*#__PURE__*/_jsx(SizeProvider, _extends({}, sizeProviderProps, {
30
- children: /*#__PURE__*/_jsx(DrawingAreaProvider, _extends({}, drawingAreaProviderProps, {
31
- children: /*#__PURE__*/_jsx(AnimationProvider, _extends({}, animationProviderProps, {
32
- children: /*#__PURE__*/_jsx(PluginProvider, _extends({}, pluginProviderProps, {
33
- children: /*#__PURE__*/_jsx(ZoomProvider, _extends({}, zoomProviderProps, {
34
- children: /*#__PURE__*/_jsx(SeriesProvider, _extends({}, seriesProviderProps, {
35
- children: /*#__PURE__*/_jsx(CartesianProviderPro, _extends({}, cartesianProviderProps, {
36
- children: /*#__PURE__*/_jsx(ZAxisContextProvider, _extends({}, zAxisContextProps, {
37
- children: /*#__PURE__*/_jsx(HighlightedProvider, _extends({}, highlightedProviderProps, {
38
- children: children
39
- }))
40
- }))
41
- }))
42
- }))
43
- }))
44
- }))
45
- }))
46
- }))
47
- }))
48
- });
49
- }
50
- export { ChartDataProviderPro };
@@ -1,43 +0,0 @@
1
- 'use client';
2
-
3
- import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
4
- const _excluded = ["zoom", "onZoomChange"];
5
- import { useChartDataProviderProps } from '@mui/x-charts/internals';
6
- export const useChartContainerProProps = props => {
7
- const {
8
- zoom,
9
- onZoomChange
10
- } = props,
11
- baseProps = _objectWithoutPropertiesLoose(props, _excluded);
12
- const {
13
- children,
14
- drawingAreaProviderProps,
15
- seriesProviderProps,
16
- cartesianProviderProps,
17
- zAxisContextProps,
18
- highlightedProviderProps,
19
- sizeProviderProps,
20
- pluginProviderProps,
21
- animationProviderProps,
22
- xAxis,
23
- yAxis
24
- } = useChartDataProviderProps(baseProps);
25
- const zoomProviderProps = {
26
- zoom,
27
- onZoomChange,
28
- xAxis,
29
- yAxis
30
- };
31
- return {
32
- zoomProviderProps,
33
- children,
34
- drawingAreaProviderProps,
35
- pluginProviderProps,
36
- seriesProviderProps,
37
- cartesianProviderProps,
38
- zAxisContextProps,
39
- highlightedProviderProps,
40
- sizeProviderProps,
41
- animationProviderProps
42
- };
43
- };
@@ -1,16 +0,0 @@
1
- import * as React from 'react';
2
- export const ZoomContext = /*#__PURE__*/React.createContext({
3
- isInitialized: false,
4
- data: {
5
- isZoomEnabled: false,
6
- isPanEnabled: false,
7
- options: {},
8
- zoomData: [],
9
- setZoomData: () => {},
10
- isInteracting: false,
11
- setIsInteracting: () => {}
12
- }
13
- });
14
- if (process.env.NODE_ENV !== 'production') {
15
- ZoomContext.displayName = 'ZoomContext';
16
- }
@@ -1,56 +0,0 @@
1
- 'use client';
2
-
3
- import * as React from 'react';
4
- import useControlled from '@mui/utils/useControlled';
5
- import { ZoomContext } from "./ZoomContext.js";
6
- import { defaultizeZoom } from "./defaultizeZoom.js";
7
- import { initializeZoomData } from "./initializeZoomData.js";
8
- import { jsx as _jsx } from "react/jsx-runtime";
9
- export function ZoomProvider({
10
- children,
11
- xAxis,
12
- yAxis,
13
- zoom,
14
- onZoomChange
15
- }) {
16
- const [isInteracting, setIsInteracting] = React.useState(false);
17
- const options = React.useMemo(() => [...defaultizeZoom(xAxis, 'x'), ...defaultizeZoom(yAxis, 'y')].reduce((acc, v) => {
18
- acc[v.axisId] = v;
19
- return acc;
20
- }, {}), [xAxis, yAxis]);
21
-
22
- // Default zoom data is initialized only once when uncontrolled. If the user changes the options
23
- // after the initial render, the zoom data will not be updated until the next zoom interaction.
24
- // This is required to avoid warnings about controlled/uncontrolled components.
25
- const defaultZoomData = React.useRef(initializeZoomData(options));
26
- const [zoomData, setZoomData] = useControlled({
27
- controlled: zoom,
28
- // eslint-disable-next-line react-compiler/react-compiler
29
- default: defaultZoomData.current,
30
- name: 'ZoomProvider',
31
- state: 'zoom'
32
- });
33
- const setZoomDataCallback = React.useCallback(newZoomData => {
34
- setZoomData(newZoomData);
35
- onZoomChange?.(newZoomData);
36
- }, [setZoomData, onZoomChange]);
37
- const value = React.useMemo(() => ({
38
- isInitialized: true,
39
- data: {
40
- isZoomEnabled: Object.keys(options).length > 0,
41
- isPanEnabled: isPanEnabled(options),
42
- options,
43
- zoomData,
44
- setZoomData: setZoomDataCallback,
45
- isInteracting,
46
- setIsInteracting
47
- }
48
- }), [zoomData, isInteracting, setIsInteracting, options, setZoomDataCallback]);
49
- return /*#__PURE__*/_jsx(ZoomContext.Provider, {
50
- value: value,
51
- children: children
52
- });
53
- }
54
- function isPanEnabled(options) {
55
- return Object.values(options).some(v => v.panning) || false;
56
- }
@@ -1,16 +0,0 @@
1
- import { useSetupPan } from "./useSetupPan.js";
2
- import { useSetupZoom } from "./useSetupZoom.js";
3
-
4
- /**
5
- * Sets up the zoom functionality if using composition or a custom chart.
6
- *
7
- * Simply add this component at the same level as the chart component to enable zooming and panning.
8
- *
9
- * See: [Composition](https://mui.com/x/react-charts/composition/)
10
- */
11
- function ZoomSetup() {
12
- useSetupZoom();
13
- useSetupPan();
14
- return null;
15
- }
16
- export { ZoomSetup };
@@ -1,32 +0,0 @@
1
- import _extends from "@babel/runtime/helpers/esm/extends";
2
- import { isDefined } from '@mui/x-charts/internals';
3
- const defaultZoomOptions = {
4
- minStart: 0,
5
- maxEnd: 100,
6
- step: 5,
7
- minSpan: 10,
8
- maxSpan: 100,
9
- panning: true,
10
- filterMode: 'keep'
11
- };
12
- export const defaultizeZoom = (axis, axisDirection) => {
13
- if (!axis) {
14
- return [];
15
- }
16
- const defaultized = axis.map(v => {
17
- if (!v.zoom) {
18
- return undefined;
19
- }
20
- if (v.zoom === true) {
21
- return _extends({
22
- axisId: v.id,
23
- axisDirection
24
- }, defaultZoomOptions);
25
- }
26
- return _extends({
27
- axisId: v.id,
28
- axisDirection
29
- }, defaultZoomOptions, v.zoom);
30
- }).filter(isDefined);
31
- return defaultized;
32
- };
@@ -1,3 +0,0 @@
1
- export * from "./ZoomContext.js";
2
- export * from "./ZoomProvider.js";
3
- export * from "./Zoom.types.js";