@mui/x-charts-pro 8.0.0-alpha.1 → 8.0.0-alpha.10

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 (178) hide show
  1. package/BarChartPro/BarChartPro.d.ts +2 -2
  2. package/BarChartPro/BarChartPro.js +72 -31
  3. package/CHANGELOG.md +1903 -231
  4. package/ChartContainerPro/ChartContainerPro.d.ts +33 -4
  5. package/ChartContainerPro/ChartContainerPro.js +55 -37
  6. package/ChartContainerPro/useChartContainerProProps.d.ts +6 -5
  7. package/ChartContainerPro/useChartContainerProProps.js +11 -7
  8. package/ChartDataProviderPro/ChartDataProviderPro.d.ts +37 -0
  9. package/{context/ChartDataProviderPro → ChartDataProviderPro}/ChartDataProviderPro.js +70 -80
  10. package/{context → ChartDataProviderPro}/package.json +1 -1
  11. package/ChartDataProviderPro/useChartDataProviderProProps.d.ts +8 -0
  12. package/ChartDataProviderPro/useChartDataProviderProProps.js +15 -0
  13. package/Heatmap/Heatmap.js +31 -8
  14. package/Heatmap/HeatmapItem.js +1 -1
  15. package/Heatmap/HeatmapTooltip.js +8 -28
  16. package/Heatmap/extremums.d.ts +2 -2
  17. package/Heatmap/formatter.d.ts +2 -2
  18. package/Heatmap/formatter.js +2 -1
  19. package/Heatmap/heatmapClasses.js +2 -1
  20. package/Heatmap/plugin.d.ts +2 -2
  21. package/Heatmap/plugin.js +4 -2
  22. package/Heatmap/tooltip.d.ts +3 -0
  23. package/Heatmap/tooltip.js +25 -0
  24. package/LineChartPro/LineChartPro.d.ts +2 -2
  25. package/LineChartPro/LineChartPro.js +78 -51
  26. package/README.md +1 -1
  27. package/ScatterChartPro/ScatterChartPro.d.ts +2 -2
  28. package/ScatterChartPro/ScatterChartPro.js +49 -33
  29. package/hooks/index.d.ts +1 -0
  30. package/hooks/index.js +2 -1
  31. package/hooks/useSeries.d.ts +2 -4
  32. package/hooks/zoom/index.d.ts +1 -0
  33. package/hooks/zoom/index.js +1 -0
  34. package/hooks/zoom/useIsZoomInteracting.d.ts +6 -0
  35. package/hooks/zoom/useIsZoomInteracting.js +14 -0
  36. package/index.d.ts +3 -1
  37. package/index.js +5 -5
  38. package/internals/plugins/allPlugins.d.ts +11 -0
  39. package/internals/plugins/allPlugins.js +5 -0
  40. package/internals/plugins/useChartProZoom/creatZoomLookup.d.ts +3 -0
  41. package/internals/plugins/useChartProZoom/creatZoomLookup.js +12 -0
  42. package/internals/plugins/useChartProZoom/defaultizeZoom.d.ts +2 -0
  43. package/internals/plugins/useChartProZoom/defaultizeZoom.js +25 -0
  44. package/internals/plugins/useChartProZoom/index.d.ts +3 -0
  45. package/internals/plugins/useChartProZoom/index.js +3 -0
  46. package/internals/plugins/useChartProZoom/useChartProZoom.d.ts +3 -0
  47. package/internals/plugins/useChartProZoom/useChartProZoom.js +303 -0
  48. package/internals/plugins/useChartProZoom/useChartProZoom.selectors.d.ts +377 -0
  49. package/internals/plugins/useChartProZoom/useChartProZoom.selectors.js +10 -0
  50. package/internals/plugins/useChartProZoom/useChartProZoom.types.d.ts +50 -0
  51. package/internals/plugins/useChartProZoom/useChartProZoom.utils.d.ts +45 -0
  52. package/internals/plugins/useChartProZoom/useChartProZoom.utils.js +126 -0
  53. package/internals/plugins/useChartProZoom/zoom.types.d.ts +53 -0
  54. package/internals/utils/releaseInfo.js +2 -2
  55. package/models/index.d.ts +1 -0
  56. package/models/index.js +2 -1
  57. package/modern/BarChartPro/BarChartPro.js +72 -31
  58. package/modern/ChartContainerPro/ChartContainerPro.js +55 -37
  59. package/modern/ChartContainerPro/useChartContainerProProps.js +11 -7
  60. package/modern/{context/ChartDataProviderPro → ChartDataProviderPro}/ChartDataProviderPro.js +70 -80
  61. package/modern/ChartDataProviderPro/useChartDataProviderProProps.js +15 -0
  62. package/modern/Heatmap/Heatmap.js +31 -8
  63. package/modern/Heatmap/HeatmapItem.js +1 -1
  64. package/modern/Heatmap/HeatmapTooltip.js +8 -28
  65. package/modern/Heatmap/formatter.js +2 -1
  66. package/modern/Heatmap/heatmapClasses.js +2 -1
  67. package/modern/Heatmap/plugin.js +4 -2
  68. package/modern/Heatmap/tooltip.js +25 -0
  69. package/modern/LineChartPro/LineChartPro.js +78 -51
  70. package/modern/ScatterChartPro/ScatterChartPro.js +49 -33
  71. package/modern/hooks/index.js +2 -1
  72. package/modern/hooks/zoom/index.js +1 -0
  73. package/modern/hooks/zoom/useIsZoomInteracting.js +14 -0
  74. package/modern/index.js +5 -5
  75. package/modern/internals/plugins/allPlugins.js +5 -0
  76. package/modern/internals/plugins/useChartProZoom/creatZoomLookup.js +12 -0
  77. package/modern/internals/plugins/useChartProZoom/defaultizeZoom.js +25 -0
  78. package/modern/internals/plugins/useChartProZoom/index.js +3 -0
  79. package/modern/internals/plugins/useChartProZoom/useChartProZoom.js +303 -0
  80. package/modern/internals/plugins/useChartProZoom/useChartProZoom.selectors.js +10 -0
  81. package/modern/internals/plugins/useChartProZoom/useChartProZoom.types.js +1 -0
  82. package/modern/internals/plugins/useChartProZoom/useChartProZoom.utils.js +126 -0
  83. package/modern/internals/plugins/useChartProZoom/zoom.types.js +1 -0
  84. package/modern/internals/utils/releaseInfo.js +2 -2
  85. package/modern/models/index.js +2 -1
  86. package/node/BarChartPro/BarChartPro.js +71 -30
  87. package/node/ChartContainerPro/ChartContainerPro.js +54 -36
  88. package/node/ChartContainerPro/useChartContainerProProps.js +11 -7
  89. package/node/{context/ChartDataProviderPro → ChartDataProviderPro}/ChartDataProviderPro.js +67 -77
  90. package/node/ChartDataProviderPro/useChartDataProviderProProps.js +21 -0
  91. package/node/Heatmap/Heatmap.js +31 -8
  92. package/node/Heatmap/HeatmapItem.js +2 -2
  93. package/node/Heatmap/HeatmapTooltip.js +6 -26
  94. package/node/Heatmap/formatter.js +2 -1
  95. package/node/Heatmap/heatmapClasses.js +5 -4
  96. package/node/Heatmap/plugin.js +4 -2
  97. package/node/Heatmap/tooltip.js +31 -0
  98. package/node/LineChartPro/LineChartPro.js +77 -50
  99. package/node/ScatterChartPro/ScatterChartPro.js +48 -32
  100. package/node/hooks/index.js +16 -1
  101. package/node/{context/CartesianProviderPro → hooks/zoom}/index.js +4 -4
  102. package/node/hooks/zoom/useIsZoomInteracting.js +19 -0
  103. package/node/index.js +34 -12
  104. package/node/internals/plugins/allPlugins.js +11 -0
  105. package/node/internals/plugins/useChartProZoom/creatZoomLookup.js +19 -0
  106. package/node/internals/plugins/useChartProZoom/defaultizeZoom.js +33 -0
  107. package/node/internals/plugins/useChartProZoom/index.js +38 -0
  108. package/node/internals/plugins/useChartProZoom/useChartProZoom.js +310 -0
  109. package/node/internals/plugins/useChartProZoom/useChartProZoom.selectors.js +18 -0
  110. package/node/internals/plugins/useChartProZoom/useChartProZoom.utils.js +140 -0
  111. package/node/internals/plugins/useChartProZoom/zoom.types.js +5 -0
  112. package/node/internals/utils/releaseInfo.js +4 -3
  113. package/package.json +6 -6
  114. package/typeOverloads/modules.d.ts +8 -1
  115. package/context/CartesianProviderPro/CartesianProviderPro.d.ts +0 -6
  116. package/context/CartesianProviderPro/CartesianProviderPro.js +0 -89
  117. package/context/CartesianProviderPro/createAxisFilterMapper.d.ts +0 -12
  118. package/context/CartesianProviderPro/createAxisFilterMapper.js +0 -60
  119. package/context/CartesianProviderPro/index.d.ts +0 -1
  120. package/context/CartesianProviderPro/index.js +0 -1
  121. package/context/ChartDataProviderPro/ChartDataProviderPro.d.ts +0 -10
  122. package/context/ChartDataProviderPro/useChartDataProviderProProps.d.ts +0 -14
  123. package/context/ChartDataProviderPro/useChartDataProviderProProps.js +0 -43
  124. package/context/ZoomProvider/Zoom.types.d.ts +0 -144
  125. package/context/ZoomProvider/ZoomContext.d.ts +0 -4
  126. package/context/ZoomProvider/ZoomContext.js +0 -16
  127. package/context/ZoomProvider/ZoomProvider.d.ts +0 -3
  128. package/context/ZoomProvider/ZoomProvider.js +0 -56
  129. package/context/ZoomProvider/ZoomSetup.d.ts +0 -9
  130. package/context/ZoomProvider/ZoomSetup.js +0 -16
  131. package/context/ZoomProvider/defaultizeZoom.d.ts +0 -2
  132. package/context/ZoomProvider/defaultizeZoom.js +0 -32
  133. package/context/ZoomProvider/index.d.ts +0 -3
  134. package/context/ZoomProvider/index.js +0 -3
  135. package/context/ZoomProvider/initializeZoomData.d.ts +0 -6
  136. package/context/ZoomProvider/initializeZoomData.js +0 -13
  137. package/context/ZoomProvider/useSetupPan.d.ts +0 -1
  138. package/context/ZoomProvider/useSetupPan.js +0 -106
  139. package/context/ZoomProvider/useSetupZoom.d.ts +0 -1
  140. package/context/ZoomProvider/useSetupZoom.js +0 -274
  141. package/context/ZoomProvider/useZoom.d.ts +0 -7
  142. package/context/ZoomProvider/useZoom.js +0 -19
  143. package/context/index.d.ts +0 -3
  144. package/context/index.js +0 -5
  145. package/modern/context/CartesianProviderPro/CartesianProviderPro.js +0 -89
  146. package/modern/context/CartesianProviderPro/createAxisFilterMapper.js +0 -60
  147. package/modern/context/CartesianProviderPro/index.js +0 -1
  148. package/modern/context/ChartDataProviderPro/useChartDataProviderProProps.js +0 -43
  149. package/modern/context/ZoomProvider/ZoomContext.js +0 -16
  150. package/modern/context/ZoomProvider/ZoomProvider.js +0 -56
  151. package/modern/context/ZoomProvider/ZoomSetup.js +0 -16
  152. package/modern/context/ZoomProvider/defaultizeZoom.js +0 -32
  153. package/modern/context/ZoomProvider/index.js +0 -3
  154. package/modern/context/ZoomProvider/initializeZoomData.js +0 -13
  155. package/modern/context/ZoomProvider/useSetupPan.js +0 -106
  156. package/modern/context/ZoomProvider/useSetupZoom.js +0 -274
  157. package/modern/context/ZoomProvider/useZoom.js +0 -19
  158. package/modern/context/index.js +0 -5
  159. package/node/context/CartesianProviderPro/CartesianProviderPro.js +0 -95
  160. package/node/context/CartesianProviderPro/createAxisFilterMapper.js +0 -68
  161. package/node/context/ChartDataProviderPro/useChartDataProviderProProps.js +0 -50
  162. package/node/context/ZoomProvider/ZoomContext.js +0 -23
  163. package/node/context/ZoomProvider/ZoomProvider.js +0 -63
  164. package/node/context/ZoomProvider/ZoomSetup.js +0 -20
  165. package/node/context/ZoomProvider/defaultizeZoom.js +0 -40
  166. package/node/context/ZoomProvider/index.js +0 -38
  167. package/node/context/ZoomProvider/initializeZoomData.js +0 -20
  168. package/node/context/ZoomProvider/useSetupPan.js +0 -114
  169. package/node/context/ZoomProvider/useSetupZoom.js +0 -281
  170. package/node/context/ZoomProvider/useZoom.js +0 -25
  171. package/node/context/index.js +0 -27
  172. /package/{context/ChartDataProviderPro → ChartDataProviderPro}/index.d.ts +0 -0
  173. /package/{context/ChartDataProviderPro → ChartDataProviderPro}/index.js +0 -0
  174. /package/{context/ZoomProvider/Zoom.types.js → internals/plugins/useChartProZoom/useChartProZoom.types.js} +0 -0
  175. /package/{modern/context/ZoomProvider/Zoom.types.js → internals/plugins/useChartProZoom/zoom.types.js} +0 -0
  176. /package/modern/{context/ChartDataProviderPro → ChartDataProviderPro}/index.js +0 -0
  177. /package/node/{context/ChartDataProviderPro → ChartDataProviderPro}/index.js +0 -0
  178. /package/node/{context/ZoomProvider/Zoom.types.js → internals/plugins/useChartProZoom/useChartProZoom.types.js} +0 -0
@@ -1,23 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.ZoomContext = void 0;
8
- var React = _interopRequireWildcard(require("react"));
9
- const ZoomContext = exports.ZoomContext = /*#__PURE__*/React.createContext({
10
- isInitialized: false,
11
- data: {
12
- isZoomEnabled: false,
13
- isPanEnabled: false,
14
- options: {},
15
- zoomData: [],
16
- setZoomData: () => {},
17
- isInteracting: false,
18
- setIsInteracting: () => {}
19
- }
20
- });
21
- if (process.env.NODE_ENV !== 'production') {
22
- ZoomContext.displayName = 'ZoomContext';
23
- }
@@ -1,63 +0,0 @@
1
- "use strict";
2
- 'use client';
3
-
4
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
5
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
6
- Object.defineProperty(exports, "__esModule", {
7
- value: true
8
- });
9
- exports.ZoomProvider = ZoomProvider;
10
- var React = _interopRequireWildcard(require("react"));
11
- var _useControlled = _interopRequireDefault(require("@mui/utils/useControlled"));
12
- var _ZoomContext = require("./ZoomContext");
13
- var _defaultizeZoom = require("./defaultizeZoom");
14
- var _initializeZoomData = require("./initializeZoomData");
15
- var _jsxRuntime = require("react/jsx-runtime");
16
- function ZoomProvider({
17
- children,
18
- xAxis,
19
- yAxis,
20
- zoom,
21
- onZoomChange
22
- }) {
23
- const [isInteracting, setIsInteracting] = React.useState(false);
24
- const options = React.useMemo(() => [...(0, _defaultizeZoom.defaultizeZoom)(xAxis, 'x'), ...(0, _defaultizeZoom.defaultizeZoom)(yAxis, 'y')].reduce((acc, v) => {
25
- acc[v.axisId] = v;
26
- return acc;
27
- }, {}), [xAxis, yAxis]);
28
-
29
- // Default zoom data is initialized only once when uncontrolled. If the user changes the options
30
- // after the initial render, the zoom data will not be updated until the next zoom interaction.
31
- // This is required to avoid warnings about controlled/uncontrolled components.
32
- const defaultZoomData = React.useRef((0, _initializeZoomData.initializeZoomData)(options));
33
- const [zoomData, setZoomData] = (0, _useControlled.default)({
34
- controlled: zoom,
35
- // eslint-disable-next-line react-compiler/react-compiler
36
- default: defaultZoomData.current,
37
- name: 'ZoomProvider',
38
- state: 'zoom'
39
- });
40
- const setZoomDataCallback = React.useCallback(newZoomData => {
41
- setZoomData(newZoomData);
42
- onZoomChange?.(newZoomData);
43
- }, [setZoomData, onZoomChange]);
44
- const value = React.useMemo(() => ({
45
- isInitialized: true,
46
- data: {
47
- isZoomEnabled: Object.keys(options).length > 0,
48
- isPanEnabled: isPanEnabled(options),
49
- options,
50
- zoomData,
51
- setZoomData: setZoomDataCallback,
52
- isInteracting,
53
- setIsInteracting
54
- }
55
- }), [zoomData, isInteracting, setIsInteracting, options, setZoomDataCallback]);
56
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ZoomContext.ZoomContext.Provider, {
57
- value: value,
58
- children: children
59
- });
60
- }
61
- function isPanEnabled(options) {
62
- return Object.values(options).some(v => v.panning) || false;
63
- }
@@ -1,20 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.ZoomSetup = ZoomSetup;
7
- var _useSetupPan = require("./useSetupPan");
8
- var _useSetupZoom = require("./useSetupZoom");
9
- /**
10
- * Sets up the zoom functionality if using composition or a custom chart.
11
- *
12
- * Simply add this component at the same level as the chart component to enable zooming and panning.
13
- *
14
- * See: [Composition](https://mui.com/x/react-charts/composition/)
15
- */
16
- function ZoomSetup() {
17
- (0, _useSetupZoom.useSetupZoom)();
18
- (0, _useSetupPan.useSetupPan)();
19
- return null;
20
- }
@@ -1,40 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.defaultizeZoom = void 0;
8
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
9
- var _internals = require("@mui/x-charts/internals");
10
- const defaultZoomOptions = {
11
- minStart: 0,
12
- maxEnd: 100,
13
- step: 5,
14
- minSpan: 10,
15
- maxSpan: 100,
16
- panning: true,
17
- filterMode: 'keep'
18
- };
19
- const defaultizeZoom = (axis, axisDirection) => {
20
- if (!axis) {
21
- return [];
22
- }
23
- const defaultized = axis.map(v => {
24
- if (!v.zoom) {
25
- return undefined;
26
- }
27
- if (v.zoom === true) {
28
- return (0, _extends2.default)({
29
- axisId: v.id,
30
- axisDirection
31
- }, defaultZoomOptions);
32
- }
33
- return (0, _extends2.default)({
34
- axisId: v.id,
35
- axisDirection
36
- }, defaultZoomOptions, v.zoom);
37
- }).filter(_internals.isDefined);
38
- return defaultized;
39
- };
40
- exports.defaultizeZoom = defaultizeZoom;
@@ -1,38 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- var _ZoomContext = require("./ZoomContext");
7
- Object.keys(_ZoomContext).forEach(function (key) {
8
- if (key === "default" || key === "__esModule") return;
9
- if (key in exports && exports[key] === _ZoomContext[key]) return;
10
- Object.defineProperty(exports, key, {
11
- enumerable: true,
12
- get: function () {
13
- return _ZoomContext[key];
14
- }
15
- });
16
- });
17
- var _ZoomProvider = require("./ZoomProvider");
18
- Object.keys(_ZoomProvider).forEach(function (key) {
19
- if (key === "default" || key === "__esModule") return;
20
- if (key in exports && exports[key] === _ZoomProvider[key]) return;
21
- Object.defineProperty(exports, key, {
22
- enumerable: true,
23
- get: function () {
24
- return _ZoomProvider[key];
25
- }
26
- });
27
- });
28
- var _Zoom = require("./Zoom.types");
29
- Object.keys(_Zoom).forEach(function (key) {
30
- if (key === "default" || key === "__esModule") return;
31
- if (key in exports && exports[key] === _Zoom[key]) return;
32
- Object.defineProperty(exports, key, {
33
- enumerable: true,
34
- get: function () {
35
- return _Zoom[key];
36
- }
37
- });
38
- });
@@ -1,20 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.initializeZoomData = void 0;
7
- // This function is used to initialize the zoom data when it is not provided by the user.
8
- // It is helpful to avoid the need to provide the possibly auto-generated id for each axis.
9
- const initializeZoomData = options => {
10
- return Object.values(options).map(({
11
- axisId,
12
- minStart: start,
13
- maxEnd: end
14
- }) => ({
15
- axisId,
16
- start,
17
- end
18
- }));
19
- };
20
- exports.initializeZoomData = initializeZoomData;
@@ -1,114 +0,0 @@
1
- "use strict";
2
- 'use client';
3
-
4
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
5
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
6
- Object.defineProperty(exports, "__esModule", {
7
- value: true
8
- });
9
- exports.useSetupPan = void 0;
10
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
11
- var React = _interopRequireWildcard(require("react"));
12
- var _hooks = require("@mui/x-charts/hooks");
13
- var _internals = require("@mui/x-charts/internals");
14
- var _useZoom = require("./useZoom");
15
- const useSetupPan = () => {
16
- const {
17
- zoomData,
18
- setZoomData,
19
- setIsInteracting,
20
- isPanEnabled,
21
- options
22
- } = (0, _useZoom.useZoom)();
23
- const drawingArea = (0, _hooks.useDrawingArea)();
24
- const svgRef = (0, _hooks.useSvgRef)();
25
- const isDraggingRef = React.useRef(false);
26
- const touchStartRef = React.useRef(null);
27
- const eventCacheRef = React.useRef([]);
28
- React.useEffect(() => {
29
- const element = svgRef.current;
30
- if (element === null || !isPanEnabled) {
31
- return () => {};
32
- }
33
- const handlePan = event => {
34
- if (element === null || !isDraggingRef.current || eventCacheRef.current.length > 1) {
35
- return;
36
- }
37
- if (touchStartRef.current == null) {
38
- return;
39
- }
40
- const point = (0, _internals.getSVGPoint)(element, event);
41
- const movementX = point.x - touchStartRef.current.x;
42
- const movementY = (point.y - touchStartRef.current.y) * -1;
43
- const newZoomData = touchStartRef.current.zoomData.map(zoom => {
44
- const option = options[zoom.axisId];
45
- if (!option || !option.panning) {
46
- return zoom;
47
- }
48
- const min = zoom.start;
49
- const max = zoom.end;
50
- const span = max - min;
51
- const MIN_PERCENT = option.minStart;
52
- const MAX_PERCENT = option.maxEnd;
53
- const movement = option.axisDirection === 'x' ? movementX : movementY;
54
- const dimension = option.axisDirection === 'x' ? drawingArea.width : drawingArea.height;
55
- let newMinPercent = min - movement / dimension * span;
56
- let newMaxPercent = max - movement / dimension * span;
57
- if (newMinPercent < MIN_PERCENT) {
58
- newMinPercent = MIN_PERCENT;
59
- newMaxPercent = newMinPercent + span;
60
- }
61
- if (newMaxPercent > MAX_PERCENT) {
62
- newMaxPercent = MAX_PERCENT;
63
- newMinPercent = newMaxPercent - span;
64
- }
65
- if (newMinPercent < MIN_PERCENT || newMaxPercent > MAX_PERCENT || span < option.minSpan || span > option.maxSpan) {
66
- return zoom;
67
- }
68
- return (0, _extends2.default)({}, zoom, {
69
- start: newMinPercent,
70
- end: newMaxPercent
71
- });
72
- });
73
- setZoomData(newZoomData);
74
- };
75
- const handleDown = event => {
76
- eventCacheRef.current.push(event);
77
- const point = (0, _internals.getSVGPoint)(element, event);
78
- if (!drawingArea.isPointInside(point)) {
79
- return;
80
- }
81
-
82
- // If there is only one pointer, prevent selecting text
83
- if (eventCacheRef.current.length === 1) {
84
- event.preventDefault();
85
- }
86
- isDraggingRef.current = true;
87
- setIsInteracting(true);
88
- touchStartRef.current = {
89
- x: point.x,
90
- y: point.y,
91
- zoomData
92
- };
93
- };
94
- const handleUp = event => {
95
- eventCacheRef.current.splice(eventCacheRef.current.findIndex(cachedEvent => cachedEvent.pointerId === event.pointerId), 1);
96
- setIsInteracting(false);
97
- isDraggingRef.current = false;
98
- touchStartRef.current = null;
99
- };
100
- element.addEventListener('pointerdown', handleDown);
101
- document.addEventListener('pointermove', handlePan);
102
- document.addEventListener('pointerup', handleUp);
103
- document.addEventListener('pointercancel', handleUp);
104
- document.addEventListener('pointerleave', handleUp);
105
- return () => {
106
- element.removeEventListener('pointerdown', handleDown);
107
- document.removeEventListener('pointermove', handlePan);
108
- document.removeEventListener('pointerup', handleUp);
109
- document.removeEventListener('pointercancel', handleUp);
110
- document.removeEventListener('pointerleave', handleUp);
111
- };
112
- }, [drawingArea, svgRef, isDraggingRef, setIsInteracting, zoomData, setZoomData, isPanEnabled, options]);
113
- };
114
- exports.useSetupPan = useSetupPan;
@@ -1,281 +0,0 @@
1
- "use strict";
2
- 'use client';
3
-
4
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports.useSetupZoom = void 0;
9
- var React = _interopRequireWildcard(require("react"));
10
- var _hooks = require("@mui/x-charts/hooks");
11
- var _internals = require("@mui/x-charts/internals");
12
- var _useZoom = require("./useZoom");
13
- /**
14
- * Helper to get the range (in percents of a reference range) corresponding to a given scale.
15
- * @param centerRatio {number} The ratio of the point that should not move between the previous and next range.
16
- * @param scaleRatio {number} The target scale ratio.
17
- * @returns The range to display.
18
- */
19
- const zoomAtPoint = (centerRatio, scaleRatio, currentZoomData, options) => {
20
- const MIN_RANGE = options.minStart;
21
- const MAX_RANGE = options.maxEnd;
22
- const MIN_ALLOWED_SPAN = options.minSpan;
23
- const minRange = currentZoomData.start;
24
- const maxRange = currentZoomData.end;
25
- const point = minRange + centerRatio * (maxRange - minRange);
26
- let newMinRange = (minRange + point * (scaleRatio - 1)) / scaleRatio;
27
- let newMaxRange = (maxRange + point * (scaleRatio - 1)) / scaleRatio;
28
- let minSpillover = 0;
29
- let maxSpillover = 0;
30
- if (newMinRange < MIN_RANGE) {
31
- minSpillover = Math.abs(newMinRange);
32
- newMinRange = MIN_RANGE;
33
- }
34
- if (newMaxRange > MAX_RANGE) {
35
- maxSpillover = Math.abs(newMaxRange - MAX_RANGE);
36
- newMaxRange = MAX_RANGE;
37
- }
38
- if (minSpillover > 0 && maxSpillover > 0) {
39
- return [MIN_RANGE, MAX_RANGE];
40
- }
41
- newMaxRange += minSpillover;
42
- newMinRange -= maxSpillover;
43
- newMinRange = Math.min(MAX_RANGE - MIN_ALLOWED_SPAN, Math.max(MIN_RANGE, newMinRange));
44
- newMaxRange = Math.max(MIN_ALLOWED_SPAN, Math.min(MAX_RANGE, newMaxRange));
45
- return [newMinRange, newMaxRange];
46
- };
47
- const useSetupZoom = () => {
48
- const {
49
- setZoomData,
50
- isZoomEnabled,
51
- options,
52
- setIsInteracting
53
- } = (0, _useZoom.useZoom)();
54
- const drawingArea = (0, _hooks.useDrawingArea)();
55
- const svgRef = (0, _hooks.useSvgRef)();
56
- const eventCacheRef = React.useRef([]);
57
- const eventPrevDiff = React.useRef(0);
58
- const interactionTimeoutRef = React.useRef(undefined);
59
- React.useEffect(() => {
60
- const element = svgRef.current;
61
- if (element === null || !isZoomEnabled) {
62
- return () => {};
63
- }
64
- const wheelHandler = event => {
65
- if (element === null) {
66
- return;
67
- }
68
- const point = (0, _internals.getSVGPoint)(element, event);
69
- if (!drawingArea.isPointInside(point)) {
70
- return;
71
- }
72
- event.preventDefault();
73
- if (interactionTimeoutRef.current) {
74
- clearTimeout(interactionTimeoutRef.current);
75
- }
76
- setIsInteracting(true);
77
- // Debounce transition to `isInteractive=false`.
78
- // Useful because wheel events don't have an "end" event.
79
- interactionTimeoutRef.current = window.setTimeout(() => {
80
- setIsInteracting(false);
81
- }, 166);
82
- setZoomData(prevZoomData => {
83
- return prevZoomData.map(zoom => {
84
- const option = options[zoom.axisId];
85
- if (!option) {
86
- return zoom;
87
- }
88
- const centerRatio = option.axisDirection === 'x' ? getHorizontalCenterRatio(point, drawingArea) : getVerticalCenterRatio(point, drawingArea);
89
- const {
90
- scaleRatio,
91
- isZoomIn
92
- } = getWheelScaleRatio(event, option.step);
93
- const [newMinRange, newMaxRange] = zoomAtPoint(centerRatio, scaleRatio, zoom, option);
94
- if (!isSpanValid(newMinRange, newMaxRange, isZoomIn, option)) {
95
- return zoom;
96
- }
97
- return {
98
- axisId: zoom.axisId,
99
- start: newMinRange,
100
- end: newMaxRange
101
- };
102
- });
103
- });
104
- };
105
- function pointerDownHandler(event) {
106
- eventCacheRef.current.push(event);
107
- setIsInteracting(true);
108
- }
109
- function pointerMoveHandler(event) {
110
- if (element === null) {
111
- return;
112
- }
113
- const index = eventCacheRef.current.findIndex(cachedEv => cachedEv.pointerId === event.pointerId);
114
- eventCacheRef.current[index] = event;
115
-
116
- // Not a pinch gesture
117
- if (eventCacheRef.current.length !== 2) {
118
- return;
119
- }
120
- const firstEvent = eventCacheRef.current[0];
121
- const curDiff = getDiff(eventCacheRef.current);
122
- setZoomData(prevZoomData => {
123
- const newZoomData = prevZoomData.map(zoom => {
124
- const option = options[zoom.axisId];
125
- if (!option) {
126
- return zoom;
127
- }
128
- const {
129
- scaleRatio,
130
- isZoomIn
131
- } = getPinchScaleRatio(curDiff, eventPrevDiff.current, option.step);
132
-
133
- // If the scale ratio is 0, it means the pinch gesture is not valid.
134
- if (scaleRatio === 0) {
135
- return zoom;
136
- }
137
- const point = (0, _internals.getSVGPoint)(element, firstEvent);
138
- const centerRatio = option.axisDirection === 'x' ? getHorizontalCenterRatio(point, drawingArea) : getVerticalCenterRatio(point, drawingArea);
139
- const [newMinRange, newMaxRange] = zoomAtPoint(centerRatio, scaleRatio, zoom, option);
140
- if (!isSpanValid(newMinRange, newMaxRange, isZoomIn, option)) {
141
- return zoom;
142
- }
143
- return {
144
- axisId: zoom.axisId,
145
- start: newMinRange,
146
- end: newMaxRange
147
- };
148
- });
149
- eventPrevDiff.current = curDiff;
150
- return newZoomData;
151
- });
152
- }
153
- function pointerUpHandler(event) {
154
- eventCacheRef.current.splice(eventCacheRef.current.findIndex(cachedEvent => cachedEvent.pointerId === event.pointerId), 1);
155
- if (eventCacheRef.current.length < 2) {
156
- eventPrevDiff.current = 0;
157
- }
158
- if (event.type === 'pointerup' || event.type === 'pointercancel') {
159
- setIsInteracting(false);
160
- }
161
- }
162
- element.addEventListener('wheel', wheelHandler);
163
- element.addEventListener('pointerdown', pointerDownHandler);
164
- element.addEventListener('pointermove', pointerMoveHandler);
165
- element.addEventListener('pointerup', pointerUpHandler);
166
- element.addEventListener('pointercancel', pointerUpHandler);
167
- element.addEventListener('pointerout', pointerUpHandler);
168
- element.addEventListener('pointerleave', pointerUpHandler);
169
-
170
- // Prevent zooming the entire page on touch devices
171
- element.addEventListener('touchstart', preventDefault);
172
- element.addEventListener('touchmove', preventDefault);
173
- return () => {
174
- element.removeEventListener('wheel', wheelHandler);
175
- element.removeEventListener('pointerdown', pointerDownHandler);
176
- element.removeEventListener('pointermove', pointerMoveHandler);
177
- element.removeEventListener('pointerup', pointerUpHandler);
178
- element.removeEventListener('pointercancel', pointerUpHandler);
179
- element.removeEventListener('pointerout', pointerUpHandler);
180
- element.removeEventListener('pointerleave', pointerUpHandler);
181
- element.removeEventListener('touchstart', preventDefault);
182
- element.removeEventListener('touchmove', preventDefault);
183
- if (interactionTimeoutRef.current) {
184
- clearTimeout(interactionTimeoutRef.current);
185
- }
186
- };
187
- }, [svgRef, setZoomData, drawingArea, isZoomEnabled, options, setIsInteracting]);
188
- };
189
-
190
- /**
191
- * Checks if the new span is valid.
192
- */
193
- exports.useSetupZoom = useSetupZoom;
194
- function isSpanValid(minRange, maxRange, isZoomIn, option) {
195
- const newSpanPercent = maxRange - minRange;
196
- if (isZoomIn && newSpanPercent < option.minSpan || !isZoomIn && newSpanPercent > option.maxSpan) {
197
- return false;
198
- }
199
- if (minRange < option.minStart || maxRange > option.maxEnd) {
200
- return false;
201
- }
202
- return true;
203
- }
204
- function getMultiplier(event) {
205
- const ctrlMultiplier = event.ctrlKey ? 3 : 1;
206
-
207
- // DeltaMode: 0 is pixel, 1 is line, 2 is page
208
- // This is defined by the browser.
209
- if (event.deltaMode === 1) {
210
- return 1 * ctrlMultiplier;
211
- }
212
- if (event.deltaMode) {
213
- return 10 * ctrlMultiplier;
214
- }
215
- return 0.2 * ctrlMultiplier;
216
- }
217
-
218
- /**
219
- * Get the scale ratio and if it's a zoom in or out from a wheel event.
220
- */
221
- function getWheelScaleRatio(event, step) {
222
- const deltaY = -event.deltaY;
223
- const multiplier = getMultiplier(event);
224
- const scaledStep = step * multiplier * deltaY / 1000;
225
- // Clamp the scale ratio between 0.1 and 1.9 so that the zoom is not too big or too small.
226
- const scaleRatio = Math.min(Math.max(1 + scaledStep, 0.1), 1.9);
227
- const isZoomIn = deltaY > 0;
228
- return {
229
- scaleRatio,
230
- isZoomIn
231
- };
232
- }
233
-
234
- /**
235
- * Get the scale ratio and if it's a zoom in or out from a pinch gesture.
236
- */
237
- function getPinchScaleRatio(curDiff, prevDiff, step) {
238
- const scaledStep = step / 1000;
239
- let scaleRatio = 0;
240
- let isZoomIn = false;
241
- const hasMoved = prevDiff > 0;
242
- if (hasMoved && curDiff > prevDiff) {
243
- // The distance between the two pointers has increased
244
- scaleRatio = 1 + scaledStep;
245
- isZoomIn = true;
246
- }
247
- if (hasMoved && curDiff < prevDiff) {
248
- // The distance between the two pointers has decreased
249
- scaleRatio = 1 - scaledStep;
250
- isZoomIn = false;
251
- }
252
- return {
253
- scaleRatio,
254
- isZoomIn
255
- };
256
- }
257
- function getDiff(eventCache) {
258
- const [firstEvent, secondEvent] = eventCache;
259
- return Math.hypot(firstEvent.pageX - secondEvent.pageX, firstEvent.pageY - secondEvent.pageY);
260
- }
261
-
262
- /**
263
- * Get the ratio of the point in the horizontal center of the area.
264
- */
265
- function getHorizontalCenterRatio(point, area) {
266
- const {
267
- left,
268
- width
269
- } = area;
270
- return (point.x - left) / width;
271
- }
272
- function preventDefault(event) {
273
- event.preventDefault();
274
- }
275
- function getVerticalCenterRatio(point, area) {
276
- const {
277
- top,
278
- height
279
- } = area;
280
- return (point.y - top) / height * -1 + 1;
281
- }
@@ -1,25 +0,0 @@
1
- "use strict";
2
- 'use client';
3
-
4
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports.useZoom = useZoom;
9
- var React = _interopRequireWildcard(require("react"));
10
- var _ZoomContext = require("./ZoomContext");
11
- /**
12
- * Get access to the zoom state.
13
- *
14
- * @returns {ZoomState} The zoom state.
15
- */
16
- function useZoom() {
17
- const {
18
- data,
19
- isInitialized
20
- } = React.useContext(_ZoomContext.ZoomContext);
21
- if (!isInitialized) {
22
- 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'));
23
- }
24
- return data;
25
- }
@@ -1,27 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- var _useZoom = require("./ZoomProvider/useZoom");
7
- Object.keys(_useZoom).forEach(function (key) {
8
- if (key === "default" || key === "__esModule") return;
9
- if (key in exports && exports[key] === _useZoom[key]) return;
10
- Object.defineProperty(exports, key, {
11
- enumerable: true,
12
- get: function () {
13
- return _useZoom[key];
14
- }
15
- });
16
- });
17
- var _ZoomSetup = require("./ZoomProvider/ZoomSetup");
18
- Object.keys(_ZoomSetup).forEach(function (key) {
19
- if (key === "default" || key === "__esModule") return;
20
- if (key in exports && exports[key] === _ZoomSetup[key]) return;
21
- Object.defineProperty(exports, key, {
22
- enumerable: true,
23
- get: function () {
24
- return _ZoomSetup[key];
25
- }
26
- });
27
- });